脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript Object合并

JavaScript中合并Object的三种基本方法小结

 更新时间：2023年08月29日 08:34:23   作者：编程三昧  
在开发过程中,我们经常会遇到合并对象的需求,今天我们就来了解一下合并对象的几种基本方法,文中通过代码示例介绍的非常详细,感兴趣的小伙伴跟着小编一起来看看吧

在开发过程中，我们经常会遇到合并对象的需求，今天我们就来了解一下合并对象的几种基本方法。

Object.assign()

Object.assign() 方法可以将一个或多个源对象的属性复制到目标对象中。如果源对象有自己的属性，那么它们的值将被保留。

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

Object.assign() 是浅拷贝，如果源对象中有值的引用，合并后在目标对象中修改值引用，同时会修改源对象的值引用。

const o1 = { a: 1 };
const o2 = { b: {
    name: "b"
} };
const obj = Object.assign({}, o1, o2);
obj.b.name = "new_b";
console.log(o2.b); // {name: 'new_b'}

解构赋值

使用解构赋值可以将对象的属性复制到一个新的对象中。

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const obj = { ...o1, ...o2 };
console.log(obj); // {a: 1, b: 2, c: 2}

可以看出，使用结构赋值合并对象时，后面对象的属性值会覆盖前面已有属性值。

使用递归方法

我们可以通过递归的方法将对象中的嵌套对象合并到一个新的对象中。

/** @format */
function mergeObjects(obj1, obj2) {
    const mergedObj = Object.assign({}, obj1, obj2);
    // 递归处理嵌套对象
    Object.keys(mergedObj).forEach((key) => {
        if (typeof mergedObj[key] === "object" && obj1[key] && obj2[key]) {
            mergedObj[key] = mergeObjects(obj1[key], obj2[key]);
        }
    });
    return mergedObj;
}
const obj1 = { a: 1, b: { c: 2, d: 3, e: { name: "e" } } };
const obj2 = { a: 2, b: { c: 3, d: 4, e: { age: 18 } } };
const mergedObj = mergeObjects(obj1, obj2);
console.log(mergedObj);
// {a:2,b:{c:3,d:4,e:{name:e,age:18}}}

总结

以上介绍的是合并对象的三种基本操作，它们也只是简化了合并对象的步骤，在具体使用的时候，需要根据场景判断哪种最合适。

到此这篇关于JavaScript中合并Object的基本方法小结的文章就介绍到这了,更多相关JavaScript Object合并内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 史上最为详细的javascript继承（推荐）

    史上最为详细的javascript继承（推荐）

    这篇文章主要介绍了javascript继承，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • javascript下动态this与动态绑定实例代码

    javascript下动态this与动态绑定实例代码

    javascript是一门动态语言，最明显就是那个dynamic this。它一般都是作为函数调用者存在。在javascript，所有关系都可以作为对象的一个关联数组元素而存在。
    2010-01-01
  • 微信小程序实现指定显示行数多余文字去掉用省略号代替

    微信小程序实现指定显示行数多余文字去掉用省略号代替

    这篇文章主要介绍了微信小程序实现指定显示行数多余文字去掉用省略号代替的方法,需要的朋友可以参考下
    2018-07-07
  • js 中 document.createEvent的用法

    js 中 document.createEvent的用法

    用该方法创建了 Event 对象以后，必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息，请参阅 Event 对象参考。
    2010-08-08
  • JavaScript设计模式初探

    JavaScript设计模式初探

    javascript设计模式在程序中经常遇到，不同的设计模式都有各自的优劣势，本文给大家整理了七种设计模式，对js设计模式相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • 微信小程序实现左滑删除效果

    微信小程序实现左滑删除效果

    这篇文章主要为大家详细介绍了微信小程序实现左滑删除效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • HTML+CSS+JS实现的简单应用小案例分享

    HTML+CSS+JS实现的简单应用小案例分享

    这篇文章主要为大家分享四个用HTML+CSS+JS实现的简单应用小案例，有：猜数字、表白墙、切换日夜间模式和待办事项，需要的可以参考一下
    2022-02-02
  • 微信小程序自定义底部、顶部、中间、左边及右边弹窗

    微信小程序自定义底部、顶部、中间、左边及右边弹窗

    这篇文章主要给大家介绍了关于微信小程序自定义底部、顶部、中间、左边及右边弹窗的相关资料,弹窗是小程序中非常重要的一种互动方式,比如用户注册时错误提示、优惠券领取提示、签到成功提示等等,需要的朋友可以参考下
    2023-11-11
  • JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法

    JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法

    本篇文章主要介绍了JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法，具有一定的参考价值，有兴趣的可以了解一下。
    2016-12-12
  • JavaScript实现定时器循环展示数组

    JavaScript实现定时器循环展示数组

    这篇文章主要为大家详细介绍了JavaScript实现定时器循环展示数组，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-09-09

最新评论