JavaScript的对象拷贝,有 浅拷贝 和 深拷贝 两种概念
浅拷贝 复制了对象的基本结构,但对于嵌套的对象或数组,只复制了引用。
深拷贝 则是创建一个完全独立的新对象,递归地复制所有嵌套的对象和数组。以下是关于浅拷贝和深拷贝的详细整理和归纳
使用 Object.assign()
const sourceObj = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, sourceObj);
shallowCopy.a = 5;
shallowCopy.b.c = 10;
console.log(sourceObj);
console.log(shallowCopy);
使用扩展运算符(Spread Operator)
const sourceObj = { a: 1, b: { c: 2 } };
const shallowCopy = { ...sourceObj };
shallowCopy.a = 5;
shallowCopy.b.c = 10;
console.log(sourceObj);
console.log(shallowCopy);
使用 JSON 序列化与解析
const sourceObj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(sourceObj));
deepCopy.a = 5;
deepCopy.b.c = 10;
console.log(sourceObj);
console.log(deepCopy);
使用递归实现深拷贝函数
function deepClone(obj) {
if (obj === null || typeof obj !== 'object') {
return obj;
}
const copy = Array.isArray(obj) ? [] : {};
for (const key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
copy[key] = deepClone(obj[key]);
}
}
return copy;
}
const sourceObj = { a: 1, b: { c: 2 } };
const deepCopy = deepClone(sourceObj);
deepCopy.a = 5;
deepCopy.b.c = 10;
console.log(sourceObj);
console.log(deepCopy);
浅拷贝通常在对象结构较简单且不涉及嵌套引用时使用,而深拷贝则适用于需要完全独立副本的情况