数组新旧数据对比

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

变化有三种情况，编辑，新增，删除。刚开始直接双重循环来对比，唯一值相等值不相等为编辑，这个很快搞定，新增时和删除这样整肯定会重复。

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

这时候直接就想到了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中取到数据，这表明这条数据是新增的，加到新数组中

全部代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    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.name, 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)
</script>
</body>
</html>

原文地址：https://www.cnblogs.com/zimengxiyu/p/17238279.html