js 数组的深拷贝

relous丶

于 2021-03-31 21:50:10 发布

阅读量583

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_33390316/article/details/115361810

版权

js 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了JavaScript中数组拷贝的几种常见方法，如Array.from()、slice()、扩展运算符和Object.assign()，以及它们在处理内层数组时存在的浅拷贝问题。通过示例展示了当修改原数组内层元素时，拷贝数组也会受到影响。为解决此问题，文章提供了一个递归实现的深拷贝函数`deepClone()`，用于完整地复制包括内层数组在内的复杂对象结构。

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

1.Array.from()
2.slice()
3.扩展运算符
4.Object.assign()
5.concat()

var oldArr = [1,2,3,[4,5,6],7]
// 可以使用以上5中方法进行拷贝，但是都会出现同一个问题，就是对内层数组
// 的拷贝仅仅拷贝了内存地址,并没有给予新的内存地址进行保存
// 比如：
var newArr = oldArr.slice()
oldArr[0] = 10
console.log(oldArr[0]) // 10
console.log(newArr[0]) // 1

oldArr[3][0] = 20
console.log(oldArr[3][0]) // 20
console.log(newArr[3][0]) // 也为20，并不是4

因此通过这个例子很容易知道，这些方法的拷贝仅仅只是对数组内第一层级进行了深拷贝，而对内层的数组仅仅是浅拷贝，只引用了其内存地址。

因此需要写一个深拷贝的函数：

function deepClone(obj){
	if(typeof obj !== 'object' || obj == null){
		return obj;
	}
	let result = Array.isArray(obj) ? [] : {};
	for(let key in obj){
		if(obj.hasOwnPrototype(key)){
			result[key] = deepClone(obj[key]);
		}
	}
}