一.JS實作

1.簡單深拷貝(一層淺拷貝)

①for回圈拷貝

// 只復制第一層的淺拷貝
function simpleCopy(obj1) {
   var obj2 = Array.isArray(obj1) ? [] : {};
   for (let i in obj1) {
   obj2[i] = obj1[i];
  }
   return obj2;
}
var obj1 = {
   a: 1,
   b: 2,
   c: {
   d: 3
  }
}
var obj2 = simpleCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;
alert(obj1.a); // 1
alert(obj2.a); // 3
alert(obj1.c.d); // 4
alert(obj2.c.d); // 4

②Object.assign()實作一層深拷貝

 var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var obj2 = Object.assign({}, obj1);
obj2.b = 5;
console.log(obj1.b); // 2
console.log(obj2.b); // 5

 var obj1 = {
    a: 1,
    b: 2,
    c: ['a','b','c']
}
var obj2 = Object.assign({}, obj1);
obj2.c[1] = 5;
console.log(obj1.c); // ["a", 5, "c"]
console.log(obj2.c); // ["a", 5, "c"]

③slice實作

// 對只有一級屬性值的陣列物件使用slice
var a = [1,2,3,4];
var b = a.slice();
b[0] = 2;
alert(a); // 1,2,3,4
alert(b); // 2,2,3,4

// 對有多層屬性的陣列物件使用slice
var a = [1,[1,2],3,4];
var b = a.slice();
b[1][0] = 2;
alert(a); // 1,2,2,3,4
alert(b); // 1,2,2,3,4

④使用concat()方法

 var a=[1,2,[3,4]]
 var c=[];
 var b=c.concat(a);
 b[0]=5;
 b[2][0]=6;
 console.log(b[0]);//5
 console.log(a[0])//1
 console.log(b[2][0]);//6
 console.log(a[2][0])//6

⑤es6的擴展運算子"..."

 var a=[1,2,[3,4]]
 var b=[...a];
 b[0]=5;
 b[2][0]=6
 console.log(b[0]);//5
 console.log(a[0])//1
 console.log(b[2][0]);//6
 console.log(a[2][0])//6

⑥通過Object.create()實作

function deepCopy(obj) {
  var copy = Object.create(Object.getPrototypeOf(obj));
  var propNames = Object.getOwnPropertyNames(obj);
  
  propNames.forEach(function(name) {
    var desc = Object.getOwnPropertyDescriptor(obj, name);
    Object.defineProperty(copy, name, desc);
  });
  
  return copy;
}

var obj1 = { a: 1, b: {bc: 50, dc: 100, be: {bea: 1}} };
var obj2 = deepCopy(obj1);
obj2.a = 20;
obj2.b.bc = 60;
console.log(obj1.a)//1
console.log(obj2.a)//20
console.log(obj1.b.bc)//60
console.log(obj2.b.bc)//60

2.粗暴深拷貝(拋棄物件的constructor)

使用JSON.stringify和JSON.parse實作深拷貝：JSON.stringify把物件轉成字串，再用JSON.parse把字串轉成新的物件；

function deepCopy(obj1){
    let _obj = JSON.stringify(obj1);
    let obj2 = JSON.parse(_obj);
    return obj2;
}
var a = [1, [1, 2], 3, 4];
var b = deepCopy(a);
b[1][0] = 2;
alert(a); // 1,1,2,3,4
alert(b); // 2,2,2,3,4

缺陷：它會拋棄物件的constructor，深拷貝之后，不管這個物件原來的建構式是什么，在深拷貝之后都會變成Object；這種方法能正確處理的物件只有 Number, String, Boolean, Array, 扁平物件，也就是說，只有可以轉成JSON格式的物件才可以這樣用，像function沒辦法轉成JSON；

let obj1 = {
   fun:function(){
      alert(123);
   }
}
let obj2 = JSON.parse(JSON.stringify(obj1));
console.log(typeof obj1.fun); // function
console.log(typeof obj2.fun); // undefined

3.復雜深拷貝(相對完美)

遞回拷貝實作深拷貝，解決回圈參考問題

/**
 * 判斷是否是基本資料型別
 * @param value 
 */
function isPrimitive(value){
  return (typeof value =https://www.cnblogs.com/eternityz/p/=='string' || 
  typeof value =https://www.cnblogs.com/eternityz/p/=='number' || 
  typeof value =https://www.cnblogs.com/eternityz/p/=='symbol' ||
  typeof value =https://www.cnblogs.com/eternityz/p/=='boolean')
}

/**
 * 判斷是否是一個js物件
 * @param value 
 */
function isObject(value){
  return Object.prototype.toString.call(value) === "[object Object]"
}

/**
 * 深拷貝一個值
 * @param value 
 */
function cloneDeep(value){

  // 記錄被拷貝的值，避免回圈參考的出現
  let memo = {};

  function baseClone(value){
    let res;
    // 如果是基本資料型別，則直接回傳
    if(isPrimitive(value)){
      return value;
    // 如果是參考資料型別，我們淺拷貝一個新值來代替原來的值
    }else if(Array.isArray(value)){
      res = [...value];
    }else if(isObject(value)){
      res = {...value};
    }

    // 檢測我們淺拷貝的這個物件的屬性值有沒有是參考資料型別，如果是，則遞回拷貝
    Reflect.ownKeys(res).forEach(key=>{
      if(typeof res[key] === "object" && res[key]!== null){
        //此處我們用memo來記錄已經被拷貝過的參考地址，以此來解決回圈參考的問題
        if(memo[res[key]]){
          res[key] = memo[res[key]];
        }else{
          memo[res[key]] = res[key];
          res[key] = baseClone(res[key])
        }
      }
    })
    return res;  
  }

  return baseClone(value)
}

二.ES插件lodash

import lodash from 'lodash'

var objects = [1,{ 'a': 1 }, { 'b': 2 }]; 
var deep = lodash.cloneDeep(objects);
deep[0] = 2;
deep[1].a = 2;
console.log(objects[0]);//1
console.log(deep[0]);//2
console.log(objects[1].a);//1
console.log(objects[1].a);//2

站在巨人肩膀上摘蘋果

https://www.jianshu.com/p/cf1e9d7e94fb

https://www.jianshu.com/p/5f6cd3dabc1c

https://segmentfault.com/a/1190000015455662

https://segmentfault.com/a/1190000018371840

https://www.jianshu.com/p/f4329eb1bace

https://www.lodashjs.com/docs/lodash

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/3056.html

標籤：JavaScript

上一篇：el-table動態合并行，列固定的資料顯示

下一篇：小程式批注/筆跡

JS實作深拷貝

目錄