js深浅克隆
kingcwt2019-2-15前端javascript
深克隆指我们把一个多维度的对象或者数组进行一份拷贝。浅克隆指我们只克隆了多维数组或者对象的最外层，改变里面的值也会改变原对象或者数组。而深克隆则不会。
let obj = {
a: 200,
b: [310, 320, 330],
c: {
x: "cwt",
},
d: /^\d+$/,
};
拿上面的例子 我们做一个简单的浅克隆
浅克隆
let obj = {
a: 200,
b: [310, 320, 330],
c: {
x: "cwt",
},
d: /^\d+$/,
};
let obj2 = { ...obj };
console.log(obj2, obj); //我们会发现obj2 和obj 是一模一样的。
//但是
obj2.c.x = 100;
//我们会发现 obj下的c下的x也等于100 这就是浅克隆
//浅克隆方法2
let newObj = {};
for (key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
深克隆
let obj = {
a: 200,
b: [310, 320, 330],
c: {
x: "cwt",
},
d: /^\d+$/,
};
let obj2 = JSON.parse(JSON.stringify(obj));
obj2.c.x = 100;
//我们发现 我们发现通过JSON.stringify再JSON.parse之后 我们改变obj2中的值 obj值不改变 所以深拷贝成功
//但是经过JSON.stringify后 d中的正则变成了空对象 被JSON.stringify处理过了 所以这也是它的弊端
封装一个深克隆的方法
function deepClone(obj) {
if (obj instanceof RegExp) return new RegExp(obj);
if (obj instanceof Date) return new Date(obj);
if (obj == null) return null;
if (typeof obj !== "object") return obj;
let newObj = new obj.constructor();
for (key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = deepClone(obj[key]);
}
}
return newObj;
}
let obj2 = deepClone(obj);
