如何深度克隆一個(gè)對(duì)象

TIGERB 發(fā)布于2019-08-22 16:15 / 2262人閱讀

摘要：如何深度克隆一個(gè)對(duì)象在我們?nèi)粘９ぷ髦薪?jīng)常會(huì)遇到需要去克隆一個(gè)對(duì)象比如多個(gè)地方用到的公共的圖表基本參數(shù)的配置相信很多人會(huì)想到用和方法去克隆一個(gè)對(duì)象，這個(gè)可以明確告訴大家這些都是些不靠譜的淺度克隆。

如何深度克隆一個(gè)對(duì)象

在我們?nèi)粘９ぷ髦薪?jīng)常會(huì)遇到需要去克隆一個(gè)對(duì)象比如多個(gè)地方用到的公共的圖表基本參數(shù)的配置

相信很多人會(huì)想到用 Object.assign, JSON.stringify 和 JSON.parse 方法去克隆一個(gè)對(duì)象，這個(gè)可以明確告訴大家這些都是些不靠譜的淺度克隆。

我們先來(lái)試一下 Object.assign 在控制臺(tái)執(zhí)行下列操作

大家有沒(méi)有發(fā)現(xiàn)聯(lián)動(dòng)了。關(guān)于此方法具體請(qǐng)參考文檔
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

接下來(lái)我們看下 JSON.stringify 和 JSON.parse 克隆對(duì)象,同樣在控制輸入

大家有沒(méi)有發(fā)現(xiàn)什么異常？雖然 JSON.stringify(value[, replacer[, space]]) 可以處理但是太麻煩了，這個(gè)方法我就不多說(shuō)了具體還是參考文檔
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

下面咋們來(lái)看一種稍微靠譜的一種方式。在本站搜的前幾條中發(fā)現(xiàn)的。

function isArray (arr) {
    return Object.prototype.toString.call(arr) === "[object Array]";  
}
// 深度克隆
function deepClone (obj) {  
    if(typeof obj !== "object" && typeof obj !== "function") {
        return obj;        //原始類型直接返回
    }
    var o = isArray(obj) ? [] : {}; 
    for(i in obj) {  
        if(obj.hasOwnProperty(i)){ 
            o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i]; 
        } 
    } 
    return o;
}

看是靠譜是真是假我們來(lái)驗(yàn)證一把還是在控制臺(tái)輸入

大家發(fā)現(xiàn)什么異常的了嗎？

這個(gè)沒(méi)有區(qū)分具體的對(duì)象，在此問(wèn)下大家js的對(duì)象有哪些呢？相信一般人答不出來(lái)4個(gè)
[object Object], [object Array], [object Null], [object RegExp], [object Date], [object HTMLXXElement], [object Map],[object Set],... 等等一系列

檢測(cè)類型使用 Object.prototype.toString.call(xxx) 和 typeof

我們分析下上面對(duì)象中哪些是引用類型需要特殊處理呢？相信大家都不陌生了。[object Object] 和 [object Array]

好！詳細(xì)大家思路有了，咋們用遞歸來(lái)實(shí)現(xiàn)一把吧！

const deepClone = function(obj) {
  // 先檢測(cè)是不是數(shù)組和Object
  // let isMap = Object.prototype.toString.call(obj) === "[object Map];
  // let isSet = Object.prototype.toString.call(obj) === "[object Set];
  // let isArr = Object.prototype.toString.call(obj) === "[object Array]";
  let isArr = Array.isArray(obj);
  let isJson = Object.prototype.toString.call(obj) === "[object Object]";
  if (isArr) {
    // 克隆數(shù)組
    let newObj = [];
    for (let i = 0; i < obj.length; i++) {
      newObj[i] = deepClone(obj[i]);
    }
    return newObj;
  } else if (isJson) {
    // 克隆Object
    let newObj = {};
    for (let i in obj) {
      newObj[i] = deepClone(obj[i]);
    }
    return newObj;
  }
  // 不是引用類型直接返回
  return obj;
};

Object.prototype.deepClone = function() {
  return deepClone(this);
};

咋們先不考慮Map Set Arguments [object XXArrayBuffer] 對(duì)象了原理都是一樣

各種情況分析完了才說(shuō)算是真克隆
我們?cè)诳刂婆_(tái)看下

注意先要把方法在控制臺(tái)輸進(jìn)去，在調(diào)試

是不是解決了？在此并沒(méi)有結(jié)束。專注的伙伴們相信發(fā)現(xiàn)了對(duì)象中包含了個(gè) deepClone 方法，具體細(xì)節(jié)我們?cè)诖司筒欢嗾f(shuō)了，我們給 Object 添加了個(gè) Object.prototype.deepClone方法導(dǎo)致了每個(gè)對(duì)象都有了此方法。

原則上我們不允許在原型鏈上添加方法的，因?yàn)樵谘h(huán)中 for in, Object.entries, Object.values, Object.keys 等方法會(huì)出現(xiàn)自定義的方法。

相信熟悉 Object 文檔的伙伴人已經(jīng)知道解決方案了，

Object.defineProperty 這個(gè)方法給大家?guī)?lái)了福音具體參考 Object 文檔。我們使用一個(gè)enumerable （不可枚舉）屬性就可以解決了。

在原來(lái)基礎(chǔ)上添加以下代碼即可。

Object.defineProperty(Object.prototype, "deepClone", {enumerable: false});

在看控制臺(tái)

同樣上面方法中也是無(wú)法克隆一個(gè)不可枚舉的屬性。

完整代碼如下

const deepClone = function(obj) {
  // 先檢測(cè)是不是數(shù)組和Object
  // let isArr = Object.prototype.toString.call(obj) === "[object Array]";
  let isArr = Array.isArray(obj);
  let isJson = Object.prototype.toString.call(obj) === "[object Object]";
  if (isArr) {
    // 克隆數(shù)組
    let newObj = [];
    for (let i = 0; i < obj.length; i++) {
      newObj[i] = deepClone(obj[i]);
    }
    return newObj;
  } else if (isJson) {
    // 克隆Object
    let newObj = {};
    for (let i in obj) {
      newObj[i] = deepClone(obj[i]);
    }
    return newObj;
  }
  // 不是引用類型直接返回
  return obj;
};

Object.prototype.deepClone = function() {
  return deepClone(this);
};
Object.defineProperty(Object.prototype, "deepClone", {enumerable: false});

為了兼容低版本瀏覽器需要借助 babel-polyfill;

好了，深度克隆介紹到此。

云服務(wù)器 GPU云服務(wù)器對(duì)象克隆克隆對(duì)象 js克隆對(duì)象 json數(shù)據(jù)如何克隆

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94181.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

TIGERB

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow怎么用gpu訓(xùn)練

閱讀 2194·2023-04-25 15:24
CSS居中完整版

閱讀 1656·2019-08-30 12:55
css自定義復(fù)選框樣式

閱讀 1672·2019-08-29 15:27
兼容性寫(xiě)法獲取鼠標(biāo)坐標(biāo)

閱讀 550·2019-08-26 17:04
前端面試每日 3+1 —— 第131天

閱讀 2494·2019-08-26 10:59
react知識(shí)點(diǎn)整理50問(wèn)（未完待續(xù)）

閱讀 1868·2019-08-26 10:44
如何深度克隆一個(gè)對(duì)象

閱讀 2263·2019-08-22 16:15
Vue-apollo — 在Vue-cli項(xiàng)目中使用Graphql

閱讀 2669·2019-08-22 15:36

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

如何深度克隆一個(gè)對(duì)象

相關(guān)文章

**【轉(zhuǎn)】JavaScript 對(duì)象的深度克隆**

一起學(xué)設(shè)計(jì)模式 - 原型模式

js對(duì)象詳解(JavaScript對(duì)象深度剖析，深度理解js對(duì)象)

淺析深度克隆（deepclone）

Vue的computed和watch的細(xì)節(jié)全面分析

發(fā)表評(píng)論

0條評(píng)論

TIGERB

男|高級(jí)講師

TA的文章

tensorflow怎么用gpu訓(xùn)練

CSS居中完整版

css自定義復(fù)選框樣式

兼容性寫(xiě)法獲取鼠標(biāo)坐標(biāo)

前端面試每日 3+1 —— 第131天

react知識(shí)點(diǎn)整理50問(wèn)（未完待續(xù)）