一竭翠、復(fù)制
淺拷貝
淺拷貝的意思就是只復(fù)制引用，而未復(fù)制真正的值。
// 數(shù)組
const originArr = [1, 2, 3]
const cloneArr = originArr
cloneArr[0] = 'a'
console.log(cloneArr) // [a, 2, 3]
// 原先的數(shù)組也改變了
console.log(originArr)// [a, 2, 3,]
// 指向的內(nèi)存是一樣的一死，所以返回true
console.log(cloneArr === originArr) // true
// 對(duì)象
const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
const cloneObj = originObj;
cloneObj.a = {aa:'aa'};
console.log(cloneObj); // {a:{aa:'aa'},b:'b',c:Array[3],d:{dd:'dd'}}
console.log(originObj); // {a:{aa:'aa'},b:'b',c:Array[3],d:{dd:'dd'}}
console.log(cloneObj === originObj) // true
上面的代碼是最簡單的利用 = 賦值操作符實(shí)現(xiàn)了一個(gè)淺拷貝，可以很清楚的看到傻唾，隨著 cloneArray 和 cloneObj 改變投慈，originArray 和 originObj 也隨著發(fā)生了變化。
深拷貝
深拷貝就是對(duì)目標(biāo)的完全拷貝冠骄，不像淺拷貝那樣只是復(fù)制了一層引用伪煤，就連值也都復(fù)制了。
只要進(jìn)行了深拷貝凛辣，它們老死不相往來抱既，誰也不會(huì)影響誰。
目前實(shí)現(xiàn)深拷貝的方法不多扁誓，主要是兩種方法：
1.JSON.stringify/parse的方法
利用 JSON 對(duì)象中的 parse 和 stringify
適用的情況防泵，代碼示例如下:
const originArr = [1, 2, 3]
const cloneArr = JSON.parse(JSON.stringify(originArr));
cloneArr[0] = 'a'
console.log(cloneArr) // [a, 2, 3]
// 原先的數(shù)組沒有改變
console.log(originArr)// [1, 2, 3,]
// 指向的內(nèi)存改變了，所以返回false
console.log(cloneArr === originArr) // false
不適用的情況蝗敢，代碼示例如下：
// 數(shù)組
const originArr = [1, 2, undefined]
const cloneArr = JSON.parse(JSON.stringify(originArr));
cloneArr[0] = 'a'
console.log(originArr)// [1, 2, undefined]
// 復(fù)制的數(shù)組屬性丟失捷泞，為null
console.log(cloneArr) // [a, 2, null]
// 對(duì)象
const originObj = {
name:'axuebin',
sayHello:function(){
console.log('Hello World');
}
}
console.log(originObj); // {name: "axuebin", sayHello: ?}
const cloneObj = JSON.parse(JSON.stringify(originObj));
// 復(fù)制的對(duì)象屬性丟失
console.log(cloneObj); // {name: "axuebin"}
以上代碼顯示，如果屬性里面有undefined寿谴、function锁右、symbol就不適用了；
MDN給出的原因解釋:
undefined讶泰、任意的函數(shù)以及 symbol 值咏瑟，在序列化過程中會(huì)被忽略（出現(xiàn)在非數(shù)組對(duì)象的屬性值中時(shí)）或者被轉(zhuǎn)換成 null（出現(xiàn)在數(shù)組中時(shí)
2.遞歸的方法
遞歸的思想就很簡單了，就是對(duì)每一層的數(shù)據(jù)都實(shí)現(xiàn)一次 創(chuàng)建對(duì)象->對(duì)象賦值 的操作痪署，簡單粗暴上代碼：
function deepClone(source){
const targetObj = source.constructor === Array ? [] : {}; // 判斷復(fù)制的目標(biāo)是數(shù)組還是對(duì)象
for(let keys in source){ // 遍歷目標(biāo)
if(source.hasOwnProperty(keys)){
if(source[keys] && typeof source[keys] === 'object'){ // 如果值是對(duì)象码泞，就遞歸一下
targetObj[keys] = source[keys].constructor === Array ? [] : {};
targetObj[keys] = deepClone(source[keys]);
}else{ // 如果不是，就直接賦值
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
// ES6深度復(fù)制的遞歸方法
const deepClone = obj => {
let clone = Object.assign({}, obj);
Object.keys(clone).forEach(
key => (clone[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key])
);
return clone;
};
一般的：
const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
const cloneObj = deepClone(originObj);
console.log(cloneObj === originObj); // false
cloneObj.a = 'aa';
cloneObj.c = [1,1,1];
cloneObj.d.dd = 'doubled';
console.log(cloneObj); // {a:'aa',b:'b',c:[1,1,1],d:{dd:'doubled'}};
console.log(originObj); // {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
帶有函數(shù)的：
const originObj = {
name:'axuebin',
sayHello:function(){
console.log('Hello World');
}
}
console.log(originObj); // {name: "axuebin", sayHello: ?}
const cloneObj = deepClone(originObj);
console.log(cloneObj); // {name: "axuebin", sayHello: ?}
也可以狼犯。搞定余寥。
是不是以為這樣就完了？辜王？ 當(dāng)然不是劈狐。請(qǐng)看下篇深淺拷貝拓展
