首頁 >web前端 >前端問答 >es6深度拷貝的幾種實作方法是什麼

es6深度拷貝的幾種實作方法是什麼

青灯夜游
青灯夜游原創
2022-03-23 12:06:527010瀏覽

深度拷貝的實作方法:1、使用「Object.assign({},obj)」語句來實作;2、使用「JSON.parse(JSON.stringify(obj))」語句來實作; 3.使用「$.extend(true,[],arr)」語句來實作。

es6深度拷貝的幾種實作方法是什麼

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

什麼是深度拷貝

深拷貝就是相對與淺拷貝而言的,最主要的差異體現在引用類型上,從本質上講就是淺拷貝只簡簡單單地把棧當中的引用地址拷貝了一份,所以當你修改新拷貝出來的值的時候,被拷貝的對像也會被你修改掉;而深拷貝是會在堆內存當中為新物件建立空間,所以被拷貝的物件就不會被無緣無故地被修改掉了。

es6中如何實作深度拷貝

#方法1:使用Object.assign

Object.assign預設是對物件進行深拷貝的,但是我們要注意的是,它只對最外層的進行深拷貝,也就是當物件內嵌套有物件的時候,被嵌套的物件進行的還是淺拷貝;

function cloneDeepAssign(obj){
  return Object.assign({},obj)
}

(溫馨提示:數組拷貝方法當中,使用...sliceconcat等進行拷貝也是一樣的效果,只深拷貝最外層)

同時,我們知道Object.assign針對的是物件本身可列舉的屬性,對於不可列舉的沒有效果;

所以,當我們對於一個層次單一物件的時候,可以考慮這種方法,簡單又快速。 (試過了,也不支援undefined)

方法2:利用JSON

這是我們最最常提到的一種深拷貝的方式,一般大部分的深拷貝都可以用JSON的方式來解決,本質是因為JSON會自己去建構新的記憶體來存放新物件。

function cloneDeepJson(obj){
  return JSON.parse(JSON.stringify(obj))
}

但我們要注意的是:

  • 會忽略 undefinedsymbol;

  • #不可以對Function進行拷貝,因為JSON格式字串不支援Function,在序列化的時候會自動刪除;

  • 諸如 MapSetRegExpDateArrayBuffer 和其他內建類型在進行序列化時會遺失;

  • 不支援循環引用物件的拷貝;(循環引用的可以大概地理解為一個物件裡面的某一個屬性的值是它自己)

方法3:利用jQuery的$.extend()

var array = [1,2,3,4];
var newArray = $.extend(true,[],array);

顯而易見,最大的缺點就是我們還需要引入jQuery庫了,所以也不太常用;

【相關推薦:javascript影片教學web前端

以上是es6深度拷貝的幾種實作方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn