合并 Object 的几种基本方法

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

Object.assign()

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

javascript 复制代码
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() 是浅拷贝,如果源对象中有值的引用,合并后在目标对象中修改值引用,同时会修改源对象的值引用。

javascript 复制代码
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'}

解构赋值

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

javascript 复制代码
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}

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

使用递归方法

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

javascript 复制代码
/** @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}}}

总结

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

相关推荐
一斤代码44 分钟前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子1 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina1 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_2 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js