js深度克隆的幾種方法

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

摘要：方法一老老實(shí)實(shí)敲代碼法迭代法，適用于所有方法二利用將對(duì)象序列化字符串，再使用來(lái)反序列化還原對(duì)象缺點(diǎn)如果里面有時(shí)間對(duì)象，則后再的結(jié)果，時(shí)間將只是字符串的形式。簡(jiǎn)而言之，第一層實(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對(duì)象序列化（JSON字符串），再使用JSON.parse來(lái)反序列化(還原)js對(duì)象

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

缺點(diǎn)：

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

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

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

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

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

方法三

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

缺點(diǎn)

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

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

GPU云服務(wù)器云服務(wù)器 js緩存的幾種方法 js的幾種數(shù)據(jù)類(lèi)型 js繼承的幾種方式最基本的幾種

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

摘要：如何深度克隆一個(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 和...

TIGERB 2019-08-22 16:15 評(píng)論0 收藏0