js深度克隆的幾種方法

Pluser 發(fā)布于2019-08-26 10:22 / 2477人閱讀

摘要：方法一老老實(shí)實(shí)敲代碼法迭代法，適用于所有方法二利用將對象序列化字符串，再使用來反序列化還原對象缺點(diǎn)如果里面有時(shí)間對象，則后再的結(jié)果，時(shí)間將只是字符串的形式。簡而言之，第一層實(shí)現(xiàn)了深度拷貝，后續(xù)層次還是淺拷貝

方法一

老老實(shí)實(shí)敲代碼法（迭代法，適用于所有）

function deepClone(obj) {
    let newObj = Array.isArray(obj) ? [] : {}
    if (obj && typeof obj === "object") {
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                newObj[key] = (obj && typeof obj[key] === "object") ? deepClone(obj[key]) : obj[key];
            }
        }
    } 
    return newObj
}
const newObj = deepClone(oldObj));

方法二

利用JSON.stringify 將js對象序列化（JSON字符串），再使用JSON.parse來反序列化(還原)js對象

const newObj = JSON.parse(JSON.stringify(oldObj));

缺點(diǎn)：

如果obj里面有時(shí)間對象，則JSON.stringify后再JSON.parse的結(jié)果，時(shí)間將只是字符串的形式。而不是時(shí)間對象；

如果obj里有RegExp、Error對象，則序列化的結(jié)果將只得到空對象；

如果obj里有function，Symbol 類型，undefined，則序列化的結(jié)果會把函數(shù)或 undefined丟失；

如果obj里有NaN、Infinity和-Infinity，則序列化的結(jié)果會變成null?

JSON.stringify()只能序列化對象的可枚舉的自有屬性，例如如果obj中的對象是有構(gòu)造函數(shù)生成的，則使用JSON.parse(JSON.stringify(obj))深拷貝后，會丟棄對象的constructor；

方法三

const newObj = Object.assign([],oldObj);

缺點(diǎn)

Object.assign只對頂層屬性做了賦值，完全沒有繼續(xù)做遞歸之類的把所有下一層的屬性做深拷貝。

簡而言之，第一層實(shí)現(xiàn)了深度拷貝，后續(xù)層次還是淺拷貝

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106076.html

相關(guān)文章

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

摘要：對象詳解對象深度剖析，深度理解對象這算是醞釀很久的一篇文章了。用空構(gòu)造函數(shù)設(shè)置類名每個(gè)對象都共享相同屬性每個(gè)對象共享一個(gè)方法版本，省內(nèi)存。 js對象詳解(JavaScript對象深度剖析，深度理解js對象) 這算是醞釀很久的一篇文章了。 JavaScript作為一個(gè)基于對象(沒有類的概念)的語言，從入門到精通到放棄一直會被對象這個(gè)問題圍繞。平時(shí)發(fā)的文章基本都是開發(fā)中遇到的問題和對...

CatalpaFlat 2019-08-22 11:12 評論0 收藏0
javascript設(shè)計(jì)模式與開發(fā)實(shí)踐（二）- 封裝和原型模式

摘要：對象會記住它的原型給對象提供了一個(gè)名為的隱藏屬性，某個(gè)對象的屬性默認(rèn)會指向它的構(gòu)造器的原型對象，即。我們通過代碼來驗(yàn)證再來實(shí)際上，就是對象跟對象構(gòu)造器的原型聯(lián)系起來的紐帶切記這句話，對未來理解原型鏈很有幫助。封裝封裝數(shù)據(jù) 在許多語言的對象系統(tǒng)中，封裝數(shù)據(jù)是由語法解析來實(shí)現(xiàn)的，這些語言也許提供了 private、public、protected 等關(guān)鍵字來提供不同的訪問權(quán)限。例如：j...

luxixing 2019-08-22 15:05 評論0 收藏0
【前端芝士樹】淺拷貝、深拷貝以及Object.assign()的作用、克隆對象、復(fù)制數(shù)組

摘要：前端芝士樹淺拷貝深拷貝以及的作用首先還是得回到的基本數(shù)據(jù)類型。值類型深拷貝數(shù)值布爾值字符串。它接受任意數(shù)量的源對象，主要作用就是枚舉它們的所有屬性并分配給。【前端芝士樹】淺拷貝、深拷貝以及Object.assign()的作用首先還是得回到Javascript的基本數(shù)據(jù)類型。值類型[深拷貝]：數(shù)值Num、布爾值Boolean、字符串String、null、undefined。基本...

ccj659 2019-08-23 16:14 評論0 收藏0
【轉(zhuǎn)】JavaScript 對象的深度克隆

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

JowayYoung 2019-08-19 17:43 評論0 收藏0
如何深度克隆一個(gè)對象

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

TIGERB 2019-08-22 16:15 評論0 收藏0