数组新旧数据对比

业务上遇到一个问题，让我对二组数据进行对比，比较数据的变化，有变化就把它放到新数组中，展示到页面上，因为数据的个数是不固定的，有三块数据都要这么做，它们的唯一值还都不一样，有的是名称，有的是编号，我需要写个函数，把新旧数据，唯一值，值一起传过去。

变化有三种情况，编辑，新增，删除。刚开始直接双重循环来对比，唯一值相等值不相等为编辑，这个很快搞定，新增时和删除数据出现重复，想想也对，新增一条原有二条，循环对比，唯一值不一样就加进去，这不肯定会重复，还要再新建个数组用来做去重处理，再新建和删除时往新建的去重数组中把唯一值添加进去，在处理新建和删除时用数组的 includes 方法去判断去重数组中是否已存在唯一值，不存在再去处理新建和删除的数据对比。这种方法循环次数太多，还要考虑新旧唯一值都存在，新数组唯一值存在旧唯一值不存在的情况。处理起来比较麻烦，不推荐这种方法

最后想到，我应该循环新数据时，直接去取旧数据对比就好，怎么直接取那，可以通过唯一值去取数据，但唯一值在对象中要循环把唯一值作为键值把数据存起来，然后取的时候直接通过唯一值去拿到数据。

这时候直接就想到了Map对象

Map 是键值对形式，它可以以任意类型来做为key，通过set方法去存数据，通过get方法去获取数据，delete方法去删除数据。通过这三个方法直接就能实现我要的效果

先创建个map，循环存数据，map存旧数据，就用新数据循环取旧数据对比就可以了

function dataComparison(newArr, oldArr, UniqueVal, val) {
        const oldMp = new Map()
        oldArr.map(item => {
            oldMp.set(item.name, item)
        })
  }

 现在数据都是键值对形式了

这时候可以直接通过get去获取数据。

我是循环现有数据，map存的是旧数据，所以删除和新增是以下情况

先新建一个数组用来接收数据的变化。

编辑

循环新版本数组，用新数组唯一值去取Map中的值，能取到，再对比值是否一致，不一致加到新建的数组中

删除

循环新版本数组，能取到Map中的数据，就把它从Map中删掉，最后Map中剩余就是在新数组没找到的，这都是删除的数据，再最后一次循环中判断Map中是否还有值，有的话就是删除了加到新建的数组中

新增

循环新版本数组，没有从Map中取到数据，这表明这条数据是新增的，加到新建的数组中

全部代码

const newArr = [
    {
        name: 'xx',
        age: "13"
    },
    {
        name: 'edit',
        age: "修改23"
    },
    {
        name: 'add',
        age: "新增"
    },
];

const oldArr = [
    {
        name: 'xx',
        age: "13"
    },

    {
        name: 'edit',
        age: "修改15"
    },
    {
        name: 'del',
        age: "删除"
    },

];


//版本变化
const res = []

function dataComparison(newArr, oldArr, UniqueVal, val) {
    const oldMp = new Map()
    oldArr.map(item => {
        oldMp.set(item[UniqueVal], item)
    })

    newArr.map((item, index) => {
        const old = oldMp.get(item[UniqueVal])
        if (old) {
            //编辑的情况
            if (item[val] !== old[val]) {
                res.push({
                    name: item[UniqueVal],
                    newVal: item[val],
                    oldVal: old[val]
                })
            }
            oldMp.delete(item[UniqueVal]);
        } else {
            //新增的情况
            res.push({
                name: item[UniqueVal],
                newVal: item[val],
                oldVal: ''
            })
        }

        if ((newArr.length - 1) === index && oldMp.size) {
            // 这是删除的情况
            oldMp.forEach(oldMpItem => {
                return res.push({
                    name: oldMpItem[UniqueVal],
                    newVal: '',
                    oldVal: oldMpItem[val]
                })
            })
        }
    })
}

dataComparison(newArr, oldArr, 'name', 'age')
console.log('res--', res)