[ ES6 ] 扩展运算符(...)与Object.assign()中的部分深拷贝

最新推荐文章于 2025-06-25 16:20:31 发布

ljw1412

最新推荐文章于 2025-06-25 16:20:31 发布

阅读量9.4k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： ES6

本文链接：https://blog.youkuaiyun.com/ljw1412/article/details/79651725

笔记专栏收录该内容

16 篇文章

订阅专栏

本文通过实例对比展示了JavaScript中深拷贝与浅拷贝的区别，包括对象和数组的复制方式及其影响。介绍了几种常用的实现深拷贝的方法，并通过修改原始数据观察不同拷贝方式的效果。

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

部分深拷贝

个人笔记，学习过程中的发现，不一定正确。

如果对象或者数组中包含子数组和子对象，那一部分为浅拷贝

原因应该是是...遍历时那部分为对象/数组类型指向原来的地址

对象

var obj = {a: 1, b: 2, c: { a: 3 },d: [4, 5]}
var obj1 = obj
var obj2 = JSON.parse(JSON.stringify(obj))//深拷贝常用方法
var obj3 = {...obj}
var obj4 = Object.assign({},obj)
obj.a = 999
obj.c.a = -999
obj.d[0] = 123
console.log(obj1) //{a: 999, b: 2, c: { a: -999 },d: [123, 5]}
console.log(obj2) //{a: 1, b: 2, c: { a: 3 },d: [4, 5]}
console.log(obj3) //{a: 1, b: 2, c: { a: -999 },d: [123, 5]}
console.log(obj4) //{a: 1, b: 2, c: { a: -999 },d: [123, 5]}

数组

var arr = [1, 2, 3, [4, 5], {a: 6, b: 7}]
var arr1 = JSON.parse(JSON.stringify(arr))//深拷贝常用方法
var arr2 = arr
var arr3 = [...arr]
var arr4 = Object.assign([],arr)
console.log(arr === arr1) //false
console.log(arr === arr2) //true
console.log(arr === arr3) //false
console.log(arr === arr4) //false
arr[0]= 999
arr[3][0]= -999
arr[4].a = 123
console.log(arr1) //[1, 2, 3, [4, 5], {a: 6, b: 7}]
console.log(arr2) //[999, 2, 3, [-999, 5], {a: 123, b: 7}]
console.log(arr3) //[1, 2, 3, [-999, 5], {a: 123, b: 7}]
console.log(arr4) //[1, 2, 3, [-999, 5], {a: 123, b: 7}]