詳解JS變量存儲深拷貝和淺拷貝

Posted on by

變量類型與存儲空間

棧內存和堆內存

基本數據類型

string、number、null、undefined、boolean、symbol(ES6新增) 變量值存放在棧內存中，可直接訪問和修改變量的值
基本數據類型不存在拷貝，好比如說你無法修改數值1的值

引用類型

Object Function RegExp Math Date 值為對象，存放在堆內存中
在棧內存中變量保存的是一個指針，指向對應在堆內存中的地址。
當訪問引用類型的時候，要先從棧中取出該對象的地址指針，然後再從堆內存中取得所需的數據

圖解存儲空間

let a1 = 0; // 棧內存
let a2 = "this is string" // 棧內存
let a3 = null; // 棧內存
let b = { x: 10 }; // 變量b存在於棧中，{ x: 10 }作為對象存在於堆中
let c = [1, 2, 3]; // 變量c存在於棧中，[1, 2, 3]作為對象存在於堆中

引用類型的賦值

let a = { x: 10, y: 20 }
let b = a;
b.x = 5;
console.log(a.x); // 5

深拷貝和淺拷貝

深拷貝

將一個對象從內存中完整的拷貝一份出來,從堆內存中開辟一個新的區域存放新對象,且修改新對象不會影響原對象

淺拷貝

淺拷貝是按位拷貝對象，它會創建一個新對象，這個對象有著原始對象屬性值的一份精確拷貝。如果屬性是基本類型，拷貝的就是基本類型的值；如果屬性是內存地址（引用類型），拷貝的就是內存地址

對象的賦值

當我們把一個對象賦值給一個新的變量時，賦的其實是該對象的在棧中的地址，而不是堆中的數據。也就是兩個對象指向的是同一個存儲空間，無論哪個對象發生改變，其實都是改變的存儲空間的內容，因此，兩個對象是聯動的。

三者對比

淺拷貝的常用的五種方法

Object.assign()

Object.assign() 方法可以把任意多個的源對象自身的可枚舉屬性拷貝給目標對象，然後返回目標對象。但是 Object.assign()進行的是淺拷貝

Object.assign 會從左往右遍歷源對象(sources)的所有屬性，然後用 = 賦值到目標對象(target)

var obj = { a: {a: "kobe", b: 39},b:1 };
        var initalObj = Object.assign({}, obj);
        initalObj.a.a = "wade";
        initalObj.b = 2;
        console.log(obj.a.a); //wade
        console.log(obj.b); //1

擴展運算符

let obj = {a:1,b:{c:1}}
let obj2 = {...obj};
obj.a=2;
console.log(obj); //{a:2,b:{c:1}}
console.log(obj2); //{a:1,b:{c:1}}

obj.b.c = 2;
console.log(obj); //{a:2,b:{c:2}}
console.log(obj2); //{a:1,b:{c:2}}

Array.prototype.slice

slice() 方法返回一個新的數組對象，這一對象是一個由 begin和 end（不包括end）決定的原數組的淺拷貝。原始數組的基本類型不會被改變，引用類型會被改變。

let arr = [1, 3, {
    username: ' kobe'
    }];
let arr3 = arr.slice();
arr3[0]=0;
arr3[2].username = 'wade'
console.log(arr);

Array.prototype.concat()

let arr = [1, 3, {
    username: 'kobe'
    }];
let arr2=arr.concat();   
arr3[0]=0;
arr2[2].username = 'wade';
console.log(arr);

手寫淺拷貝

function shallowCopy(src) {
    var dst = {};
    for (var prop in src) {
        if (src.hasOwnProperty(prop)) {
            dst[prop] = src[prop];
        }
    }
    return dst;
}

深拷貝的常用方法

jsON.parse(jsON.stringify())

通過JSON.stringify實現深拷貝有幾點要註意

拷貝的對象的值中如果有函數,undefined,symbol則經過JSON.stringify()序列化後的JSON字符串中這個鍵值對會消失

無法拷貝不可枚舉的屬性，無法拷貝對象的原型鏈

拷貝Date引用類型會變成字符串

拷貝RegExp引用類型會變成空對象

對象中含有NaN、Infinity和-Infinity，則序列化的結果會變成null

無法拷貝對象的循環應用(即obj[key] = obj)

let arr = [1, 3, {
    username: ' kobe'
}];
let arr4 = JSON.parse(JSON.stringify(arr));
arr4[2].username = 'duncan'; 
console.log(arr, arr4)

手寫乞丐版深拷貝

首先這個deepClone函數並不能復制不可枚舉的屬性以及Symbol類型

這裡隻是針對Object引用類型的值做的循環迭代，而對於Array,Date,RegExp,Error,Function引用類型無法正確拷貝

對象成環，即循環引用 (例如：obj1.a = obj)

function clone(target) {
    if (typeof target === 'object') {
        let cloneTarget = Array.isArray(target) ? [] : {};
        for (const key in target) {
            cloneTarget[key] = clone(target[key]);
        }
        return cloneTarget;
    } else {
        return target;
    }
};

皇帝版深拷貝

該實例來自ConardLi大佬的github，源地址：https://github.com/ConardLi/

const mapTag = "[object Map]";
    const setTag = "[object Set]";
    const arrayTag = "[object Array]";
    const objectTag = "[object Object]";
    const argsTag = "[object Arguments]";

    const boolTag = "[object Boolean]";
    const dateTag = "[object Date]";
    const numberTag = "[object Number]";
    const stringTag = "[object String]";
    const symbolTag = "[object Symbol]";
    const errorTag = "[object Error]";
    const regexpTag = "[object RegExp]";
    const funcTag = "[object Function]";

    const deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag];

    function forEach(array, iteratee) {
      let index = -1;
      const length = array.length;
      while (++index < length) {
        iteratee(array[index], index);
      }
      return array;
    }

    function isObject(target) {
      const type = typeof target;
      return target !== null && (type === "object" || type === "function");
    }

    function getType(target) {
      return Object.prototype.toString.call(target);
    }

    function getInit(target) {
      const Ctor = target.constructor;
      return new Ctor();
    }

    function cloneSymbol(targe) {
      return Object(Symbol.prototype.valueOf.call(targe));
    }

    function cloneReg(targe) {
      const reFlags = /\w*$/;
      const result = new targe.constructor(targe.source, reFlags.exec(targe));
      result.lastIndex = targe.lastIndex;
      return result;
    }

    function cloneFunction(func) {
      const bodyReg = /(?<={)(.|\n)+(?=})/m;
      const paramReg = /(?<=\().+(?=\)\s+{)/;
      const funcString = func.toString();
      if (func.prototype) {
        const param = paramReg.exec(funcString);
        const body = bodyReg.exec(funcString);
        if (body) {
          if (param) {
            const paramArr = param[0].split(",");
            return new Function(...paramArr, body[0]);
          } else {
            return new Function(body[0]);
          }
        } else {
          return null;
        }
      } else {
        return eval(funcString);
      }
    }

    function cloneOtherType(targe, type) {
      const Ctor = targe.constructor;
      switch (type) {
        case boolTag:
        case numberTag:
        case stringTag:
        case errorTag:
        case dateTag:
          return new Ctor(targe);
        case regexpTag:
          return cloneReg(targe);
        case symbolTag:
          return cloneSymbol(targe);
        case funcTag:
          return cloneFunction(targe);
        default:
          return null;
      }
    }

    function clone(target, map = new WeakMap()) {
      // 克隆原始類型
      if (!isObject(target)) {
        return target;
      }

      // 初始化
      const type = getType(target);
      let cloneTarget;
      if (deepTag.includes(type)) {
        cloneTarget = getInit(target, type);
      } else {
        return cloneOtherType(target, type);
      }

      // 防止循環引用
      if (map.get(target)) {
        return map.get(target);
      }
      map.set(target, cloneTarget);

      // 克隆set
      if (type === setTag) {
        target.forEach(value => {
          cloneTarget.add(clone(value, map));
        });
        return cloneTarget;
      }

      // 克隆map
      if (type === mapTag) {
        target.forEach((value, key) => {
          cloneTarget.set(key, clone(value, map));
        });
        return cloneTarget;
      }

      // 克隆對象和數組
      const keys = type === arrayTag ? undefined : Object.keys(target);
      forEach(keys || target, (value, key) => {
        if (keys) {
          key = value;
        }
        cloneTarget[key] = clone(target[key], map);
      });

      return cloneTarget;
    }

    const map = new Map();
    map.set("key", "value");
    map.set("ConardLi", "code秘密花園");

    const set = new Set();
    set.add("ConardLi");
    set.add("code秘密花園");

    const target = {
      field1: 1,
      field2: undefined,
      field3: {
        child: "child"
      },
      field4: [2, 4, 8],
      empty: null,
      map,
      set,
      bool: new Boolean(true),
      num: new Number(2),
      str: new String(2),
      symbol: Object(Symbol(1)),
      date: new Date(),
      reg: /\d+/,
      error: new Error(),
      func1: () => {
        console.log("code秘密花園");
      },
      func2: function(a, b) {
        return a + b;
      }
    };

    const result = clone(target);

    console.log(target);
    console.log(result);

以上就是詳解JS變量存儲深拷貝和淺拷貝的詳細內容，更多關於JS變量存儲深拷貝和淺拷貝的資料請關註WalkonNet其它相關文章！

推薦閱讀：