js深淺拷貝

所謂的深淺拷貝是相對與typeof === 'object' 而言的,數組是用堆對應保存的。
淺拷貝:拷貝了對象的存放地址,只是指向相同而已
深拷貝:完全複製了一個獨立的個體

1、 淺拷貝 (指向同一個存放地址)

 let arr1 = [1,3,5];
 let arr2 = arr1;
 arr1[0] = 10;
 console.log(arr2) // [10,3,5]

2、深拷貝

  • 2.1 返回新數組方法 slice() 、 contat()、 map()
  let arr1 = [2,5,7];
  let arr2 = arr1.slice(0);
  let arr3 = arr1.contat();
  let arr4 = arr1.map(x => x);
  arr2[0] = 4;
 arr1[0] = 99;
console.log(arr1,arr2) // [99,5,7]  [4,5,7] 
  • 2.2 ES6擴展運算符實現數組的深拷貝
 let arr = [1,3,5];
 let arr1 = [...arr];
  • 2.3 for-in連原型鏈也一併複製的方法
 let arr = [1,3,5];
 let arr2 = [] ;
 for(var key in arr) {
  arr2[key] = arr[key]
}
  • 2.4 使用數組遍歷賦值
  let arr = [1,2,4];
  let arr2 = [];
 arr.foreach((ele,index) =>{
   arr2[index] = ele;
 })
  • 2.5 多維數組複製
 let arr = [1,[1,4],5,[{name:'bobo'}]];
let arr2 =  JSON.parse(JSON.stringify(arr));
console.log(arr2)  //  [1,[1,4],5,[{name:'bobo'}]]

總結了這麼多方法實現深拷貝,下面總結一個完整的深拷貝的實現方法

 DeepCopy (obj) {
    let str;
    let newobj;
    if (typeof obj !== 'object') {
      return obj;
    } else if (window.JSON) {
      str = JSON.stringify(obj);
      newobj = JSON.parse(str);
    } else {
      newobj = obj.constructor === Array ? [] : {};
      for (var i in obj) {
        newobj[i] = typeof obj[i] === 'object' ? this.DeepCopy(obj[i]) : obj[i];
      }
    }
    return newobj;
  },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章