JavaScript 深拷貝

zhangwang 發(fā)布于2019-08-22 18:28 / 2455人閱讀

摘要：深拷貝是一件看起來很簡單的事情，但其實一點兒也不簡單。我們也可以利用這個實現(xiàn)對象的深拷貝。而是利用之前已經(jīng)拷貝好的值。深拷貝的詳細(xì)的源碼可以在這里查看。大功告成我們雖然的確解決了深拷貝的大部分問題。

js深拷貝是一件看起來很簡單的事情，但其實一點兒也不簡單。對于循環(huán)引用的問題還有一些內(nèi)置數(shù)據(jù)類型的拷貝，如Map, Set, RegExp, Date, ArrayBuffer 和其他內(nèi)置類型。處理起來并非像想象的那么簡單。下面終結(jié)一下在實際的項目中，使用的一些深拷貝的方法的優(yōu)缺點。大家也可以關(guān)注我的GitHub，互相交流學(xué)習(xí)進(jìn)步。

JSON.parse

先將一個對象轉(zhuǎn)為json對象。然后再解析這個json對象。

let obj = {a:{b:22}};
let copy = JSON.parse(JSON.stringify(obj));

這種方法的優(yōu)點就是代碼寫起來比較簡單。但是缺點也是顯而易見的。你先是創(chuàng)建一個臨時的，可能很大的字符串，只是為了把它重新放回解析器。另一個缺點是這種方法不能處理循環(huán)對象。

如下面的循環(huán)對象用這種方法的時候會拋出異常

let a = {};
let b = {a};
a.b = b;
let copy = JSON.parse(JSON.stringify(a));

諸如 Map, Set, RegExp, Date, ArrayBuffer 和其他內(nèi)置類型在進(jìn)行序列化時會丟失。

let a = {};
let b = new Set();
b.add(11);
a.test = b;
let copy = JSON.parse(JSON.stringify(a));

a 的值打印如下

copy的值打印如下

對比發(fā)現(xiàn)，Set已丟失。

Structured Clone 結(jié)構(gòu)化克隆算法 MessageChannel

建立兩個端，一個端發(fā)送消息，另一個端接收消息。

function structuralClone(obj) {
    return new Promise(resolve =>{
        const {port1, port2} = new MessageChannel();
        port2.onmessage = ev => resolve(ev.data);
        port1.postMessage(obj);
    })
}
const obj = /* ... */;
structuralClone(obj).then(res=>{
     console.log(res);
})

這種方法的優(yōu)點就是能解決循環(huán)引用的問題，還支持大量的內(nèi)置數(shù)據(jù)類型。缺點就是這個方法是異步的。

History API

利用history.replaceState。這個api在做單頁面應(yīng)用的路由時可以做無刷新的改變url。這個對象使用結(jié)構(gòu)化克隆，而且是同步的。但是我們需要注意，在單頁面中不要把原有的路由邏輯搞亂了。所以我們在克隆完一個對象的時候，要恢復(fù)路由的原狀。

function structuralClone(obj) {
  const oldState = history.state;
  history.replaceState(obj, document.title);
  const copy = history.state;
  history.replaceState(oldState, document.title);
  return copy;
}

var obj = {};
var b = {obj};
obj.b = b
var copy = structuralClone(obj); 
console.log(copy);

這個方法的優(yōu)點是。能解決循環(huán)對象的問題，也支持許多內(nèi)置類型的克隆。并且是同步的。但是缺點就是有的瀏覽器對調(diào)用頻率有限制。比如Safari 30 秒內(nèi)只允許調(diào)用 100 次

Notification API

這個api主要是用于桌面通知的。如果你使用Facebook的時候，你肯定會發(fā)現(xiàn)時常在瀏覽器的右下角有一個彈窗，對就是這家伙。我們也可以利用這個api實現(xiàn)js對象的深拷貝。

function structuralClone(obj) {
  return new Notification("", {data: obj, silent: true}).data;
}

var obj = {};
var b = {obj};
obj.b = b
var copy = structuralClone(obj);
console.log(copy)

同樣是優(yōu)點和缺點并存，優(yōu)點就是可以解決循環(huán)對象問題，也支持許多內(nèi)置類型的克隆，并且是同步的。缺點就是這個需要api的使用需要向用戶請求權(quán)限，但是用在這里克隆數(shù)據(jù)的時候，不經(jīng)用戶授權(quán)也可以使用。在http協(xié)議的情況下會提示你再https的場景下使用。

lodash的_.cloneDeep()

支持循環(huán)對象，和大量的內(nèi)置類型，對很多細(xì)節(jié)都處理的比較不錯。推薦使用。
支持的類型有很多

我們這里再次關(guān)注一下lodash是如何解決循環(huán)應(yīng)用這個問題的？

從相關(guān)的代碼中。我們可以發(fā)現(xiàn)。lodash是用一個棧記錄了。所有被拷貝的引用值。如果再次碰到同樣的引用值的時候，不會再去拷貝一遍。而是利用之前已經(jīng)拷貝好的值。

lodash深拷貝的詳細(xì)的源碼可以在這里查看。
https://github.com/lodash/lod...

實現(xiàn)一個簡易點的深拷貝，以解決循環(huán)引用的問題為目標(biāo)

我們僅僅實現(xiàn)一個簡易點的深拷貝。能優(yōu)雅的處理循環(huán)引用的即可。在實現(xiàn)深拷貝之前，我們首先溫習(xí)回顧一下js中的遍歷對象的屬性的方法和各種方法的優(yōu)缺點。

js中遍歷一個對象的屬性的方法

Object.keys() 僅僅返回自身的可枚舉屬性，不包括繼承來的，更不包括Symbol屬性

Object.getOwnPropertyNames() 返回自身的可枚舉和不可枚舉屬性。但是不包括Symbol屬性

Object.getOwnPropertySymbols() 返回自身的Symol屬性

for...in 可以遍歷對象的自身的和繼承的可枚舉屬性，不包含Symbol屬性

Reflect.ownkeys() 返回對象自身的所有屬性，不管是否可枚舉，也不管是否是Symbol。注意不包括繼承的屬性

實現(xiàn)深拷貝，解決循環(huán)引用問題

/**
 * 判斷是否是基本數(shù)據(jù)類型
 * @param value 
 */
function isPrimitive(value){
  return (typeof value === "string" || 
  typeof value === "number" || 
  typeof value === "symbol" ||
  typeof value === "boolean")
}

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

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

  // 記錄被拷貝的值，避免循環(huán)引用的出現(xiàn)
  let memo = {};

  function baseClone(value){
    let res;
    // 如果是基本數(shù)據(jù)類型，則直接返回
    if(isPrimitive(value)){
      return value;
    // 如果是引用數(shù)據(jù)類型，我們淺拷貝一個新值來代替原來的值
    }else if(Array.isArray(value)){
      res = [...value];
    }else if(isObject(value)){
      res = {...value};
    }

    // 檢測我們淺拷貝的這個對象的屬性值有沒有是引用數(shù)據(jù)類型。如果是，則遞歸拷貝
    Reflect.ownKeys(res).forEach(key=>{
      if(typeof res[key] === "object" && res[key]!== null){
        //此處我們用memo來記錄已經(jīng)被拷貝過的引用地址。以此來解決循環(huán)引用的問題
        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)
}

驗證我們寫的cloneDeep是否能解決循環(huán)應(yīng)用的問題

var obj = {};
var b = {obj};
obj.b = b
var copy = cloneDeep(obj); 
console.log(copy);

完美。大功告成

我們雖然的確解決了深拷貝的大部分問題。不過很多細(xì)節(jié)還沒有去處理。在生產(chǎn)環(huán)境，我們還是要使用lodash的cloneDeep。cloneDeep對每個數(shù)據(jù)類型都多帶帶處理的非常好。比如ArrayBuffer什么的。我們都沒有處理。

云服務(wù)器 GPU云服務(wù)器 javascript深拷貝深拷貝深拷貝和淺拷貝 javascript淺拷貝

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95887.html

發(fā)表評論

登陸后可評論

0條評論

zhangwang

男|高級講師

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

TA的文章

服務(wù)器怎么做成虛擬主機-虛擬主機怎么變成物理主機？

閱讀 2079·2021-09-22 15:54
數(shù)據(jù)庫無安全保護(hù)?印尼當(dāng)局調(diào)查國家COVID應(yīng)用程序百萬記錄泄漏

閱讀 1838·2021-09-04 16:40
CVTE2019春招前端二面涼經(jīng)

閱讀 864·2019-08-30 15:56
移動端兼容問題總結(jié)(4)

閱讀 2630·2019-08-30 15:44
【Amaple教程】1. 啟動路由

閱讀 2156·2019-08-30 13:52
localhost、本地IP下頁面渲染不同原理解析

閱讀 1129·2019-08-29 16:35
構(gòu)建靜態(tài)頁面之 [ 表單 ]

閱讀 3350·2019-08-29 16:31
CSS3 簡單圖形繪制

閱讀 2570·2019-08-29 13:48

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

JavaScript 深拷貝

相關(guān)文章

JavaScript中的淺拷貝與深拷貝

JavaScript中的淺拷貝與深拷貝