JS比较两个对象数组的差异

矫情吗；* 2022-12-20 02:16 185阅读 0赞

后台传过来一个对象数组，vue渲染到页面中，然后修改了这个对象数组，可能是增删改了其中的某些对象。但是不是操作一下就发到后台去保存，而是只是前端页面在发生变化，最后点击提交按钮的时候才把变化过的数据传到后台去更新。  
而且后台更新的时候，不是把这整个数组替换成新的，而是改动里面的一部分。  
所以最后一步发送到后台的时候，前端就需要比较新的对象数组相比于原来的对象数组做了什么操作。然后把这些操作发送到后台。  
以下是比较的算法，刚开始我是把list1和list2都遍历了一遍，觉得效率低就改为了下面的。

/**
     * 判断对象是否为空
     * @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 可能修改过的数组
     */
    function findOperate(list1, list2) {
        
        //用于记录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('delete', 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('modify', obj1.id,objOperateObj);
                }
            } else {
        
                //js没有下标越界，所以如果obj1是undefined，那么obj2就是新增出的对象
                console.log('add', obj2);
            }
        });
    }

用两个对象数组去测试，假设页面数据从user1变成了user2。

const user1 = [{
        id: 0, name: 'zhangsan', age: 18}, {
        id: 1, name: 'lisi', age: 19}, {
        id: 2, name: 'wangwu', age: 20}, {
        id: 3, name: 'wangwu', age: 20}];
    const user2 = [{
        id: 0, name: 'zhangsan2', age: 19}, {
        id: 3, name: 'wangwu', age: 20}, {
        id: 4, name: 'xinren', age: 100}];
    
    findOperate(user1, user2);

打印结果为

modify 0 {
         name: 'zhangsan2', age: 19 }
    delete {
         id: 1, name: 'lisi', age: 19 }
    delete {
         id: 2, name: 'wangwu', age: 20 }
    add {
         id: 4, name: 'xinren', age: 100 }

从user1到user2，原id为0的对象，name改为了zhangsan2，age改为了19。  
原id为1和2的对象被删除。  
新增了id为4的对象。

发表评论取消回复

表情：

评论列表（有 0 条评论，185人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python如何比较两个列表的差异？

Python如何比较两个列表的差异？当我们处理数据时，经常需要对数据进行比较，找出它们之间的差异。Python提供了一些方法，可以方便地比较列表的差异。本文将介绍Pytho

傷城~/ 2024年03月26日 20:43/ 0 赞/ 74 阅读

相关 JS合并两个数组的方法

JS合并两个数组的方法我们在项目过程中，有时候会遇到需要将两个数组合并成为一个的情况。比如： var a = [1,2,3]; var b

妖狐艹你老母/ 2023年10月18日 22:06/ 0 赞/ 137 阅读

相关 js 比较两个对象是否相等

this.storageData，this.form是对象因为对象是引用类型不能直接用== 我们可以先把对象变成字符串类型或者循环对象中

旧城等待，/ 2023年01月19日 07:23/ 0 赞/ 11 阅读

相关 JS比较两个对象数组的差异

后台传过来一个对象数组，vue渲染到页面中，然后修改了这个对象数组，可能是增删改了其中的某些对象。但是不是操作一下就发到后台去保存，而是只是前端页面在发生变化，最后点击提交按钮

矫情吗；*/ 2022年12月20日 02:16/ 0 赞/ 186 阅读

相关 JS 比较两个数的大小；比较两个小数的大小（超好用！！！）

比较两个数的大小：整数如下: if(parseInt(xxx)>parseInt(xxxx)){ } 小数可以这样。 if(pars

谁践踏了优雅/ 2022年11月07日 00:58/ 0 赞/ 308 阅读

相关 Linux下比较两个文件的差异

Linux下比较两个文件的差异 diff File1 File2 vimdiff File1 File2 tkdiff File1 File2 (调用

╰半橙微兮°/ 2022年09月02日 03:58/ 0 赞/ 177 阅读

相关 git diff 比较两个版本的差异

直接使用[Git][] diff 可以产看当前没有add 的内容修改查看已经add 没有commit 的改动使用 [ git][Git] diff --cached g

野性酷女/ 2022年06月12日 04:14/ 0 赞/ 269 阅读

相关比较两个数据库的表结构差异

/\ \--比较两个数据库的表结构差异 \--邹建 2003.9-- \/ /\ \--调用示例 exec p\_comparestructure

ゝ一世哀愁。/ 2022年04月01日 11:24/ 0 赞/ 272 阅读

相关 JS合并两个数组的方法

我们在项目过程中，有时候会遇到需要将两个数组合并成为一个的情况。 var a = [1,2,3]; var b = [4,5,6]; 有两个数组a、b，需求

阳光穿透心脏的1/2处/ 2022年01月22日 05:01/ 0 赞/ 283 阅读

相关 js比较两个对象是否相等

> 前言：如何判断两个对象是否相等？两个Object类型对象，即使拥有相同属性、相同值，当使用 == 或 === 进行比较时，也不认为他们相等。这就是因为他们是通过引用（内

快来打我*/ 2021年09月29日 06:46/ 0 赞/ 440 阅读