JavaScript 里的深拷贝和浅拷贝
JS中数据类型分为基本数据类型 和引用数据类型。
基本类型值
指的是那些保存在栈 内存中的简单数据段。包含Number
,String
,Boolean
,Null
,Undefined
,Symbol
。
引用类型值
指的是那些保存在堆 内存中的对象,所以引用类型的值保存的是一个指针,这个指针指向对象的地址。引用类型包含Object
类型、Array
类型、Date
类型、RegExp
类型、Function
类型 等。
因为引用类型保存的是指向存储地址的指针,所以我们直接把一个引用类型赋值给另外一个引用类型时候,相当于是把指针赋值过去,实际上两个对象的存储地址是一样的。因此也就导致这两个对象共用地址,只要地址里的数据被修改后,两个对象的值都会改变。
浅拷贝的实现方式
1.Array.concat()
js
const arr = [1,2,3];
const copy = arr.concat();
console.log(copy); // 输出: [1, 2, 3]
2.Object.assign()
js
const arr= [1,2,3];
const copy1 = Object.assign({}, arr);
console.log(copy); // 输出: [1, 2, 3]
3.slice()
js
const arr= [1,2,3];
let copy = arr.slice();
console.log(copy); // 输出: [1, 2, 3]
4.扩展运算符 ...
js
const arr= [1,2,3];
const copy = [...arr];
console.log(copy); // 输出: [1, 2, 3]
深拷贝
1.JSON.parse()和JSON.stringify()
js
const obj1 = {
x: 1,
y: {
m: 1
}
};
const obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj2) //{x: 1, y: {m: 1}}
1.这是最简单的方法之一,但它有一些限制,比如不能正确处理函数、undefined
、Symbol
、循环引用等特殊类型的值。
2.它会抛弃对象的constructor。也就是深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object
3.如果对象中存在循环引用的情况无法正确处理。
2. 递归复制
通过递归函数手动复制对象的每个属性。这种方法可以处理更复杂的对象和特殊情况(如循环引用)。
js
function deepClone(obj, hash = new WeakMap()) {
if (obj === null) return null; // null 的情况
if (obj instanceof Date) return new Date(obj); // 日期对象直接返回一个新的日期对象
if (obj instanceof RegExp) return new RegExp(obj); // 正则对象直接返回一个新的正则对象
//hash判断该属性是否被复制
// 如果循环引用了就用 weakMap 来解决
if (hash.has(obj)) return hash.get(obj);
let allDesc = Object.getOwnPropertyDescriptors(obj);
let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);
hash.set(obj, cloneObj);
for (let key of Reflect.ownKeys(obj)) {
if (typeof obj[key] === 'object' && obj[key] !== null) {
cloneObj[key] = deepClone(obj[key], hash);
} else {
cloneObj[key] = obj[key];
}
}
return cloneObj;
}
// 使用示例
let original = { a: 1, b: { c: 2 } };
original.b.d = original; // 创建一个循环引用
let clone = deepClone(original);
console.log(clone);