方式1:JSON.parse(JSON.stringify(obj))
通过JSON.stringify把对象转成字符串,再用JSON.parse把字符串转成一个全的新的对象;
let list = [{ name: 'Tom' }];
let copyList = JSON.parse(JSON.stringify([...list]));
copyList[0].name = 'Jerry'
console.log(list[0].name); // Tom
console.log(copyList[0].name); // Jerry
方式2:递归实现
采用递归去拷贝所有层级属性
function deepClone(obj) {
let objClone = Array.isArray(obj) ? [] : {};
if (obj && typeof obj === "object") {
for (key in obj) {
if (obj.hasOwnProperty(key)) {
//判断ojb子元素是否为对象,如果是,递归复制
if (obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone(obj[key]);
} else {
//如果不是,简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
let a = [1, 2, 3, 4],
b = deepClone(a);
a[0] = 2;
console.log(a, b) // [2,2,3,4] [1,2,3,4]
(...)扩展运算符是不是深拷贝?
总结:扩展运算符既不是深拷贝,也不是浅拷贝。一半一半,他只能深拷贝第一层,第二层的拷贝还是浅拷贝,当拷贝对象的属性值对应的都是简单的基本类型数据,可以理解为深拷贝。当拷贝对象的属性对应的值为数组或对象等引用类型时,为浅拷贝。所以,还是老实用递归写深拷贝把。JSON的深拷贝不好用,局限性太大了。
扩展运算符是深拷贝还是浅拷贝1
扩展运算符是深拷贝还是浅拷贝2