合并对象的两种方法

最新推荐文章于 2025-06-18 15:21:29 发布

大白兔i

最新推荐文章于 2025-06-18 15:21:29 发布

阅读量1.4w

点赞数 7

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_44956916/article/details/111469533

本文介绍了JavaScript中两种常用的对象合并方法：使用扩展运算符(...)及Object.assign()。通过具体示例展示了不同方法下属性覆盖的规则，并对比了这两种方法的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1…扩展运算符，谁在后面谁覆盖前面的

let obj ={
    a:1,
    b:2
}
obj2={
    c:3,
    a:4,
    b:5
}
let obj3={
    ...obj,
    c:3,
    a:4,
    b:5
}
console.log(obj3);//{ a: 4, b: 5, c: 3 }
let obj4={
    c:3,
    a:4,
    b:5,
    ...obj
}
console.log(obj4);//{ c: 3, a: 1, b: 2 }
console.log(obj2 === obj)//false

在这里插入图片描述

2.Object.assign(target,)把后面的合并到目标对象中，目标对象就是合并之后的结果了

let obj4={
    c:3,
    a:4,
    b:5,
    ...obj
}
console.log(obj4);//{ c: 3, a: 1, b: 2 }
console.log(obj2 === obj)//false

// 第二种方法Object.assign
let obj5=Object.assign(obj,obj2);
console.log(obj5);//{ a: 4, b: 5, c: 3 }
console.log(obj);//{ a: 4, b: 5, c: 3 }
console.log(obj5===obj)//true

在这里插入图片描述

/*
    合并对象的2种方法
    1)...扩展运算符，谁在后面谁覆盖前面的
    2)Object.assign(target,)把后面的合并到目标对象中，目标对象就是合并之后的结果了
*/
let obj ={
    a:1,
    b:2
}
obj2={
    c:3,
    a:4,
    b:5
}
let obj3={
    ...obj,
    c:3,
    a:4,
    b:5
}
console.log(obj3);//{ a: 4, b: 5, c: 3 }
let obj4={
    c:3,
    a:4,
    b:5,
    ...obj
}
console.log(obj4);//{ c: 3, a: 1, b: 2 }
console.log(obj2 === obj)//false

// 第二种方法Object.assign
let obj5=Object.assign(obj,obj2);
console.log(obj5);//{ a: 4, b: 5, c: 3 }
console.log(obj);//{ a: 4, b: 5, c: 3 }
console.log(obj5===obj)//true