JS的对象合并

最新推荐文章于 2024-08-26 14:00:09 发布

ʚ 追风去

最新推荐文章于 2024-08-26 14:00:09 发布

阅读量847

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/aka_xyz/article/details/127123963

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS的对象合并

Object.assign()

· 同名属性会被覆盖
· 第一个参数如果不是对象的话，会转换为对象，然后进行属性合并，如果转换失败则会报错
· 其他参数如果不是对象的话，会转换为对象，如果转换失败，会被忽略。

        const o1 = {a: 1, b: 2}
        const o2 = {b: 3, c: 4}

        const res1 = Object.assign(o1, o2)
        console.log(res1);

在这里插入图片描述

扩展运算符

· 同名属性会被覆盖
· 对于第一个参数没有限制，如果不能转换为对象，会直接忽略。

        const res2 = {...o1, ...o2}
        console.log(res2);

在这里插入图片描述

以上两种是使用原生JS可以实现的，下面几种是使用各种JS实用库提供的方法使用方法和Object.assign() 类似。
JQuery.extend()
lodash.assign()
lodash.merge()

        // 方法三 JQuery.extend()
        const res3 = jQuery.extend(o1, o2)
        console.log(res3);


        // 方法四： lodash.assign()

        const res4 = _.assign(o1, o2);
        console.log(res4);

        // 方法五： lodash.merge()
        const res5 = _.merge(o1, o2);
        console.log(res5);
        
        // 方法六：Immutable.merge()
        const res6 = Immutable.merge(o1, o2)
        console.log(res6);

lodash.assign() 和 lodash.merge()的区别

· lodash.assign() 是基于 Object.assign() 实现的，遇到同名属性会覆盖。
· lodash.merge() 遇到同名属性值是对象字面量形式或者集合形式，按照对象属性进行合并或者数组索引进行值合并

        const o3 = {
            c: 1,
            d: {
                e: 1,
                f: 2
            },
            h: [
                { i: 1 },
                { i: 1 }
            ]
        }

        const o4 = {
            c: 2,
            d: {
                e: 3,
                g: 4
            },
            h: [
                { j: 2 },
                { j: 2 }
            ]
        }

        const res7 = _.assign(o3, o4);
        console.log('res7',res7);

        const res8 = _.merge(o3, o4);
        console.log('res8',res8);