淺析深度克隆（deepclone）

yhaolpz 發布于2019-08-26 10:37 / 2467人閱讀

摘要：深度克隆方法，返回一個新的克隆對象這里得說明深拷貝與錢拷貝的區別，淺拷貝是復制一個對象的引用，深拷貝是一個新的對象，與原對象有著不同的內存地址方法一通過遞歸遍歷一個對象，返回一個新的對象深拷貝要深拷貝的值判斷某個對象是否含有指定的屬性該方法

深度克隆方法，返回一個新的克隆對象
這里得說明深拷貝與錢拷貝的區別，淺拷貝是復制一個對象的引用，深拷貝是chone一個新的對象，與原對象有著不同的內存地址

方法一
通過遞歸遍歷一個對象，返回一個新的對象

/**
 * 深拷貝
 * @param {*} target 要深拷貝的值
 */
function deepclone(target) {
  if (typeof target !== "object") return target;

  let obj;
  if (!Array.isArray) {
    Array.isArray = function(arg) {
      return Object.prototype.toString.call(arg) === "[object Array];";
    };
  }
  if (Array.isArray(target)) {
    obj = [];
  } else {
    obj = {};
  }
  for (let prop in target) {
    // obj.hasOwnProperty 判斷某個對象是否含有指定的屬性
    // 該方法會忽略掉從原型鏈上繼承的屬性
    if (target.hasOwnProperty(prop)) {
      if (typeof target === "object") {
        obj[prop] = deepclone(target[prop]);
      } else {
        obj[prop] = target[prop];
      }
    }
  }
  return obj;
}

console.log(deepclone({ a: 1, b: { c: 2 } })); // 打印 { a: 1, b: { c: 2 } }
console.log([1, 23, { a: 2 }]); // 打印 [1, 23, { a: 2 }]
console.log(deepclone(5)); // 打印 5

方法二
通過hack方式實現

function deepclone(target) {
  return JSON.parse(JSON.stringify(target));
}
console.log(deepclone({ a: 1, b: { c: 2 } })); // 打印 { a: 1, b: { c: 2 } }
console.log([1, 23, { a: 2 }]); // 打印 [1, 23, { a: 2 }]
console.log(deepclone(5)); // 打印 5

方法三
通過Object.getPrototypeOf() 獲取目標對象的原型，通過Object.assign()生成一個新的對象

function deepclone(target) {
  if (typeof target !== "object") return target;
  return Object.assign(
    {},
    Object.create(Object.getPrototypeOf(target)),
    target
  );
}

console.log(deepclone({ a: 1, b: { c: 2 } })); // 打印 { a: 1, b: { c: 2 } }
console.log([1, 23, { a: 2 }]); // 打印 [1, 23, { a: 2 }]
console.log(deepclone(5)); // 打印 5

方法四
通過Object.getPrototypeOf() 獲取目標對象的原型，通過擴展運算符以及proto來實現深度克隆（僅適用于瀏覽器端）

function deepclone(target) {
  if (typeof target !== "object") return target;
  return {
    __photo__: Object.getPrototypeOf(target),
    ...target
  };
}

console.log(deepclone({ a: 1, b: { c: 2 } }));
console.log([1, 23, { a: 2 }]);
console.log(deepclone(5));

各種方式都有自己的優劣，以及適用場景，在不知道怎么選的情況下，選擇方法一、三比較靠譜

GPU云服務器云服務器 deepClone 源碼淺析 cdn淺析 jdbc連接mysql數據庫的方法淺析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106475.html

如何深度克隆一個對象

摘要：如何深度克隆一個對象在我們日常工作中經常會遇到需要去克隆一個對象比如多個地方用到的公共的圖表基本參數的配置相信很多人會想到用和方法去克隆一個對象，這個可以明確告訴大家這些都是些不靠譜的淺度克隆。如何深度克隆一個對象在我們日常工作中經常會遇到需要去克隆一個對象比如多個地方用到的公共的圖表基本參數的配置相信很多人會想到用 Object.assign, JSON.stringify 和...

TIGERB 2019-08-22 16:15 評論0 收藏0
js深度克隆的幾種方法

摘要：方法一老老實實敲代碼法迭代法，適用于所有方法二利用將對象序列化字符串，再使用來反序列化還原對象缺點如果里面有時間對象，則后再的結果，時間將只是字符串的形式。簡而言之，第一層實現了深度拷貝，后續層次還是淺拷貝方法一老老實實敲代碼法（迭代法，適用于所有） function deepClone(obj) { let newObj = Array.isArray(obj) ? [...

Pluser 2019-08-26 10:22 評論0 收藏0
【轉】JavaScript 對象的深度克隆

摘要：在聊以下簡稱深度克隆之前，我們先來了解一下中對象的組成。克隆或者拷貝分為種淺度克隆深度克隆。淺度克隆基本類型為值傳遞，對象仍為引用傳遞。該文轉載自http://www.cnblogs.com/zichi/p/4568150.html，有部分修改。在聊JavaScript（以下簡稱js）深度克隆之前，我們先來了解一下js中對象的組成。在 js 中一切實例皆是對象，具體分為原始類型 ...

JowayYoung 2019-08-19 17:43 評論0 收藏0
js clone

摘要：克隆的概念淺克隆原始類型為值傳遞，對象類型仍為引用傳遞。深度克隆檢驗參數，如果不是對象直接返回原型鏈上繼承過來的屬性無法通過檢測到，返回。方法用于將字符串解析為，可以任意轉換生成的值及其屬性，并返回值。克隆的概念淺克隆：原始類型為值傳遞，對象類型仍為引用傳遞。深克隆：所有元素或屬性均完全復制，與原對象完全脫離，也就是說所有對于新對象的修改都不會反映到原對象中。淺克隆就是將棧內存中...

diabloneo 2019-08-23 12:20 評論0 收藏0
lodash之cloneDeep淺析

摘要：淺拷貝和深拷貝本質上的原因是對象引用的是地址，直接賦值會吧引用地址也復制給新值。深拷貝是會遞歸源數據，吧新值得引用地址給換掉。對遞歸對遞歸調用是否是類型數組這里主要是會有個的特殊數組返回的特殊數組其他方法庫或等淺拷貝和深拷貝本質上的原因是對象引用的是地址，直接賦值會吧引用地址也復制給新值。淺復制只會將對象的各個屬性進行依次復制，會把引用地址也復制。深拷貝是會遞歸源數據，吧新值得引用...

chemzqm 2019-08-26 18:26 評論0 收藏0