js基础-题目28

JavaScript中的对象拷贝与合并：深拷贝与浅拷贝解析

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 106 阅读

0 ·

CC 4.0 BY-SA版权

柳晓黑胡椒

文章标签：

#javascript #前端 #es6

js燃烧吧！！！专栏收录该内容

53 篇文章

订阅专栏

本文探讨了JavaScript中对象拷贝的两种常见方式——浅拷贝（如Object.assign）和深拷贝（如使用扩展运算符）。通过示例展示了这两种拷贝在处理基本类型和引用类型属性时的区别。在浅拷贝中，修改源对象会影响副本，而在深拷贝中则不会。同时，Object.assign还可用于对象的合并，并仅比较和合并第一层属性。

整理下之前做的有点疑惑的js基础题目和大家分享以下，如果大家觉得有用，别忘了点一下赞哦

基本类型的"深拷贝"

const a = {x:1,s:{y:2}}
const b= {...a}//flag1
const c = {}
Object.assign(c,a)//flag2
a.x = 2
console.log(a.x)//2
console.log(b.x)//1
console.log(c.x)//1
a.s.y = 3
console.log(b)//{x:1,s:{y:3}}
console.log(c)//{x:1,s{y:3}}

这题的主要问题是
flag1处和flag2处的操作有什么区别
flag1处：相当于把 a对象展开了一层，再把这一层拷贝到一个新的对象，这样第一层中的基本类型的就不是通向同一个指针，而里面的引用类型的还是指向同一个指针
flag2处：Object.assign也是基本类型的深拷贝，可以认为是一个浅拷贝，只拷贝第一级

这里Object.assign 还可以实现浅比较(把两个对象合并成一个)
这个方法也是只比较第一级

const obj1 = {a:1,f:{c:2}}
const obj2 = {a:2,b:2,f:{d:5}}
console.log(obj1)//{ a: 2, f: { d: 5 }, b: 2 }  合并到obj1并返回
console.log(Object.assign(obj1,obj2))//{ a: 2, f: { d: 5 }, b: 2 }