完美解決JavaScript的深淺拷貝

前言

"拷貝"一直都是面試的熱門考題。看似簡單,實則難住不少面試者,回答的馬馬虎虎,模棱兩可。抽出時間好好分析總結一下"拷貝",讓這個難題徹底消失。

正文

從一則故事講起,昨天因為醫(yī)院開不出藥,我拿上藥取小區(qū)藥店去買藥,進門之后我問老板有沒有這個藥,老板轉(zhuǎn)身進去一個小屋子拿了一盒藥，果不其然確實有,藥的名字和毫克一摸一樣，但是盒子的樣子和廠商不一樣,我問老板：“這兩個藥是一種藥嗎,盒子不一樣啊,藥的成分是一樣的嗎？”老板說當然一樣啊,這個就和你去買豬肉一樣,同樣是豬身上的肉，只不過是你去這個超市和去其他超市買場地一樣而已。最后為了安全起見，我還是沒有買那個藥。

"拷貝"分為淺拷貝和深拷貝。它是針對對象來說的,如果不是對象一切免談。這里的對象可以理解為我拿的那盒藥,淺拷貝可以理解為老板拿出來的那盒藥，雖然藥的名字和毫克一樣，然后里面的我們不知道是否真的一樣，可能一樣可能不一樣。深拷貝可以理解為我買到了一摸一樣的藥,一層一層的藥名，毫克，廠商，成分都一樣。

總結：

• 淺拷貝就是針對對象的屬性依次進行復制,只復制一層,不會遞歸到個屬性復制,會產(chǎn)生引用問題即內(nèi)存地址是指的同一地址。簡單來說就是拷貝之后和原對象有關。
• 深拷貝就是針對對象的各屬性遞歸復制到新的對象上,內(nèi)存地址不會指向同一地址。簡單來說就是拷貝之后和元對象無關。

下面看一個淺拷貝的例子:

let school={'name':"W3Cschool"};
let my = {age:{count:18},name:"W3Cschool編程獅"};
let all = {...school,...my};
my.age.count=100;
console.log(all);
console.log(my);

結果:

{ age: { count: 100 }, name: 'W3Cschool編程獅' }
{ age: { count: 100 }, name: 'W3Cschool編程獅' }

結論是:淺拷貝修改拷貝之后的對象上的屬性會把原對象身上的屬性同時修改掉。

下面再看一個深拷貝的例子：

const _ = require("loadsh")
let my = {age:{count:18},name:"W3Cschool編程獅"};
let all = _.cloneDeep(my);
all.age.count =100;
console.log(my);
console.log(all);

結果:

{ age: { count: 18 }, name: 'W3Cschool編程獅' }
{ age: { count: 100 }, name: 'W3Cschool編程獅' }

結論是:深拷貝修改拷貝之后的對象上的屬性不會把原對象身上的屬性同時修改掉。

拷貝的方法

1.數(shù)組方法:slice和concat

• slice

let arr = [1,2,3,4];
let arr2 = arr.slice(0)
arr2[2]=5;


console.log(arr);  //[ 1, 2, 3, 4 ]
console.log(arr2); //[ 1, 2, 5, 4 ]

當數(shù)組里是不是對象的時候從結果上看是深拷貝,在看下面例子

let arr = [{1:1,2:2}];
let arr2 = arr.slice(0)
arr2[2]=5;


console.log(arr);  //[ { '1': 1 }, { '2': 5 } ]
console.log(arr2); //[ { '1': 1 }, { '2': 5 } ]

當數(shù)組里是對象的時候就變成了淺拷貝

• concat

let arr = [1,2,3,4];
let arr2 = [].concat(arr);
arr2[2]=5;
console.log(arr); //[ 1, 2, 3, 4 ]  ?
console.log(arr2); //[ 1, 2, 5, 4 ]

當數(shù)組里不是對象的時候從結果上看是深拷貝,在看下面例子

let arr = [{1:1},{2:2}];
let arr2 = arr.cancat(0)
arr2[1][2]=5;


console.log(arr);  //[ { '1': 1 }, { '2': 5 } ]  ?變成了引用
console.log(arr2); //[ { '1': 1 }, { '2': 5 } ]

當數(shù)組里是對象的時候就變成了淺拷貝

總結:只有當數(shù)組是一維數(shù)組而且不包含對象的時候才是深拷貝

（推薦教程：JavaScript教程）

2.Object.assgin()

let a= {a:1,b:2};
let b= Object.assign({},a);
a.a=3;
console.log(a)  //{a: 3, b: 2}
console.log(b)  //{a: 1, b: 2}  ?
let a= {a:1,b:{c:2}};
let b= Object.assign({},a);
a.b.c=3;
console.log(a)  //{a: 1, b: {c:3}}
console.log(b)  //{a: 1, b: {c:3}}   ?變成了引用

總結:Object.assgin如果涉及到嵌套多個對象的話就變成了引用 解決方法:使用JSON.stringify()先轉(zhuǎn)化成字符串,再通過JSON.parse()轉(zhuǎn)化成對象

• 3.JSON.parse(JSON.stringify())

let a= {a:1,b:{c:2}};
let b= JSON.parse(JSON.stringify(a))
a.b.c=3;
console.log(a)  //{a: 1, b: {c:3}}
console.log(b)  //{a: 1, b: {c:2}}   ?
let school={'name':"W3Cschool編程獅",fn:function(){}};
let my = {age:{count:18},name:"W3Cschool編程獅"};
let all=JSON.parse(JSON.stringify({...school,...my}))
console.log(all);  //{'name':"W3Cschool編程獅",age:{count:18}}; //?把fn給丟了

總結: JSON.parse(JSON.stringify()) 這個方法有一定的局限性，會丟失 fn 。

• 4.手寫深拷貝

let deepClone=(obj)=>{
    if(obj==undefined) return obj;  //undefined == null
    if(obj instanceof RegExp) return new RegExp(obj);
    if(obj instanceof Date) return new Date(obj);
    if(typeof obj!=="object") return obj;
    let newObj = new obj.constructor;
    for(let key in obj){
        if(obj.hasOwnProperty(key)){
            newObj[key] = deepClone(obj[key])
        }
    }
    return newObj;
}
let obj1 = {name:{age:"10"}}
let n = deepClone(obj1)
obj1.name.age = "231"
console.log(n);  //{name:{age:"10"}}  ?
let obj = { name:"W3Cschool編程獅" }
obj.aaa=obj
let n = deepClone(obj1)
console.log(n);  //死循環(huán)了  ?

解決這個問題可以使用WeakMap

let deepClone=(obj,hash=new WeakMap())=>{
    if(obj==undefined) return obj;  //undefined == null
    if(obj instanceof RegExp) return new RegExp(obj);
    if(obj instanceof Date) return new Date(obj);
    if(typeof obj!=="object") return obj;
    if(hash.has(obj)) return hash.get(obj);
    let newObj = new obj.constructor;
    hash.set(obj,newObj);


    for(let key in obj){
        if(obj.hasOwnProperty(key)){
            newObj[key] = deepClone(obj[key],hash)
        }
    }
    return newObj;
}

• 5.lodash的cloneDeep

<br> 源碼地址:https://github.com/lodash/lodash/blob/86a852fe763935bb64c12589df5391fd7d3bb14d/.internal/baseClone.js
<br> ```

• 6.vue-router源碼中的克隆方法

function clone (value) {
  if (Array.isArray(value)) {
    return value.map(clone)
  } else if (value && typeof value === 'object') {
    const res = {}
    for (const key in value) {
      res[key] = clone(value[key])
    }
    return res
  } else {
    return value
  }
}
let arr = [{1:1},{2:2},function(){}];
let arr2 = clone(arr)
arr2[1][2]=5;
console.log(arr)  //[ { '1': 1 }, { '2': 2 }, [Function (anonymous)] ]   ? 深拷貝
console.log(arr2); //[ { '1': 1 }, { '2': 5 }, [Function (anonymous)] ]
function extend (a, b) {
  for (const key in b) {
    a[key] = b[key]
  }
  return a
}
let b={a:1,b:{c:2}};
let a= extend({},b);
a.b.c=5;
console.log(a);  //{ a: 1, b: { c: 5 } }
console.log(b);  //{ a: 1, b: { c: 5 } }   淺拷貝

（推薦微課：JavaScript微課）

文章來源：公眾號--小丑的小屋 作者：小丑

以上就是W3Cschool編程獅關于 完美解決JavaScript的深淺拷貝 的相關介紹了，希望對大家有所幫助。