JS比较数组不同并打印

请求后台传过来一个对象数组，vue渲染到页面中，然后修改这个对象数组，可能是 增 删 改 其中的某些对象。最后点击提交按钮的时候才把变化过的数据传到后台去更新。
而且后台更新的时候，不是把这整个数组替换成新的，而是改动里面的一部分。
所以最后一步发送到后台的时候，前端就需要比较新的对象数组相比于原来的对象数组做了什么操作。然后把这些操作发送到后台。

新建ListMap.js文件 进行封装:

/**
 * 判断对象是否为空
 * @param obj 对象
 * @returns {boolean} 为空返回true，不为空返回false
 */
function isEmptyObj(obj) {
    //如果对象的键数组的长度是0，表示为空对象
    return Object.keys(obj).length === 0;
}

/**
 * 找到两个相同结构的对象的差异内容，并返回包含所有差异的数组 值只能是简单类型
 * @param obj1 原对象
 * @param obj2 可能修改过的对象
 * @returns {{}} 包含所有差异的数组
 */
function findObjOperate(obj1, obj2) {
    const resultObj = {};
    //遍历obj1的键数组，因为obj1和obj2结构相同，所以不考虑结构上的差异
    Object.keys(obj1).forEach(key => {
        if (obj1[key] !== obj2[key]) {
            //将变化过的属性挂载到返回对象中
            resultObj[key] = obj2[key];
        }
    });
    return resultObj;
}

/**
 * 找到两个对象数组的差异，并打印从list1到list2的所有变化
 * 注意id不能修改
 * @param list1 数组
 * @param list2 数组
 */
export function findOperate(list1, list2) {
    let add = []
    let isdev = []
    let repair = []
    //用于记录id值和索引值之间差别的平衡值
    let step = 0;
    //遍历list2
    list2.forEach((obj2, index) => {
        //当前id和平衡过差值后的索引值还是不等
        if (obj2.id !== index + step) {
            //当前id和新索引值之间的差值就是被删除对象的个数
            for (let j = index + step; j < obj2.id; j++) {
                console.log('删除', list1[j]);
                isdev.push(list1[j])
            }
            //更新平衡值
            step = obj2.id - index;
        }
        //根据新索引值在list1中找到对应的对象
        const obj1 = list1[index + step];
        if (obj1) {
            //比较obj1和obj2的差异
            const objOperateObj = findObjOperate(obj1, obj2);
            //如果返回的对象为空对象，表示没有差异
            if (!isEmptyObj(objOperateObj)) {
                console.log('修改', obj1.id, objOperateObj);
                repair.push({ id: obj1.id, text: objOperateObj })
            }
        } else {
            //obj2就是新增出的对象
            console.log('新增', obj2);
            add.push(obj2)
        }
    });
    console.log('新增', add);
    console.log('删除', isdev);
    console.log('修改', repair);
}

组件中引用使用:

<template>
  <div class="home">
    <h1>引用法</h1>
    <button @click="findOperate(list1, list2)">对比</button>
  </div>
</template>

<script>
import { findOperate } from "../utils/ListMap";
export default {
  name: "AsdHomeView",
  data() {
    return {
      list1: [
        { id: 0, name: "11111111", age: 18 },
        { id: 1, name: "2222222222", age: 19 },
        { id: 2, name: "3333333333", age: 20 },
        { id: 3, name: "444444444", age: 20 },
      ],
      list2: [
        { id: 0, name: "11111111", age: 18 },
        { id: 1, name: "2222222222", age: 19 },
        { id: 2, name: "333", age: 20 },
        { id: 4, name: "555555555555555", age: 100 },
        { id: 5, name: "555555555555555", age: 100 },
      ],
    };
  },
  mounted() {},
  methods: {
    findOperate,
  },
};
</script>