成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript：利用遞歸實(shí)現(xiàn)對象深拷貝

Airy / 792人閱讀

摘要：先來普及一下深拷貝和淺拷貝的區(qū)別淺拷貝就是簡單的復(fù)制，用等號即可完成這就完成了一個淺拷貝但是當(dāng)修改對象的時候，我們發(fā)現(xiàn)對象的值也被改變了這是因?yàn)闇\拷貝只復(fù)制了指向?qū)ο蟮闹羔?，新舊對象共用同一塊內(nèi)存，修改某一個對象的同時也會把另一個都一并修改

先來普及一下深拷貝和淺拷貝的區(qū)別
淺拷貝：就是簡單的復(fù)制，用等號即可完成

let a = {a: 1}
let b = a

這就完成了一個淺拷貝
但是當(dāng)修改對象b的時候，我們發(fā)現(xiàn)對象a的值也被改變了

b.a = 10
console.log(a.a) => 10

這是因?yàn)闇\拷貝只復(fù)制了指向?qū)ο蟮闹羔?，新舊對象共用同一塊內(nèi)存，修改某一個對象的同時也會把另一個都一并修改了

深拷貝：跟淺拷貝最簡單明了的區(qū)別就是修改拷貝的對象，不會改變源對象
利用Object.assign可以對只有一層的對象實(shí)現(xiàn)深拷貝，如下：

let a = {a: 1,b: 2,c: 3}
let b = Object.assign({}, a)
b.b = 100
console.log(a.b) => 2

可以看出來這樣是完全可以做到對只有一層的對象實(shí)現(xiàn)深拷貝的
但是如果對象里面的元素還是對象的話就沒作用了

let a = {a: 1,b: 2,c: 3, d: {a: 1}}
let b = Object.assign({}, a)
b.d.a = 100
console.log(a.d.a) => 100

對于這種比較復(fù)雜的對象，我們就可以利用遞歸的方式實(shí)現(xiàn)真正的對象深拷貝了

function deepClone (sourceObj, targetObj) {
    let cloneObj = targetObj || {}
    if(!sourceObj || typeof sourceObj !== "object" || sourceObj.length === undefined){
        return sourceObj
    }
    if(sourceObj instanceof Array){
        cloneObj = sourceObj.concat()
    } else {
        for(let i in sourceObj){
            if (typeof sourceObj[i] === "object") {
                cloneObj[i] = deepClone(sourceObj[i], {})
            } else {
                cloneObj[i] = sourceObj[i]
            }
        }
    }
    return cloneObj
}

簡單的幾行代碼就可以輕松實(shí)現(xiàn)對象的深拷貝

簡單的測試代碼，如下：
let sourceObj = {
  a: 1,
  b: {
    a: 1
  },
  c: {
    a: 1,
    b: {
      a: 1
    }
  },
  d: function() {
    console.log("hello world")
  },
  e: [1, 2, 3]
}
let targetObj = deepClone(sourceObj, {})
targetObj.c.b.a = 9
console.log(sourceObj) => { a: 1,  b: { a: 1 },  c: { a: 1, b: { a: 1 } },  d: [Function: d],  e: [ 1, 2, 3 ] }
console.log(targetObj) => { a: 1,  b: { a: 1 },  c: { a: 1, b: { a: 9 } },  d: [Function: d],  e: [ 1, 2, 3 ] }

另外介紹兩個用來做深拷貝的庫

**jquery**
使用方法：
let targetObj = $.extent(true,{},sourceObj)
**lodash函數(shù)庫**
使用方法：
npm install lodash
**es5寫法**
let lodash = require("lodash")
**es6寫法**
import lodash from "lodash"

let targetOj = lodash.cloneDeep(sourceObj)

各位看官覺得有什么地方不對的請多多指教。

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

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

相關(guān)文章

  • JavaScript中的淺拷貝和深拷貝

    摘要：在中可以通過添加一個參數(shù)來實(shí)現(xiàn)遞歸，調(diào)用就可以實(shí)現(xiàn)一個深拷貝。利用序列化實(shí)現(xiàn)一個深拷貝 在JavaScript中，對于Object和Array這類引用類型值，當(dāng)從一個變量向另一個變量復(fù)制引用類型值時，這個值的副本其實(shí)是一個指針，兩個變量指向同一個堆對象，改變其中一個變量，另一個也會受到影響。 這種拷貝分為兩種情況：拷貝引用和拷貝實(shí)例，也就是我們說的淺拷貝和深拷貝 淺拷貝（shallow...

    ernest.wang 評論0 收藏0

  • JavaScript基礎(chǔ)心法——深淺拷貝

    摘要：原文地址基礎(chǔ)心法深淺拷貝歡迎。上面的代碼是最簡單的利用賦值操作符實(shí)現(xiàn)了一個淺拷貝，可以很清楚的看到，隨著和改變，和也隨著發(fā)生了變化。展開運(yùn)算符結(jié)論實(shí)現(xiàn)的是對象第一層的深拷貝。 原文地址：JavaScript基礎(chǔ)心法——深淺拷貝 歡迎star。 如果有錯誤的地方歡迎指正。 淺拷貝和深拷貝都是對于JS中的引用類型而言的，淺拷貝就只是復(fù)制對象的引用，如果拷貝后的對象發(fā)生變化，原對象也會發(fā)生...

    keithxiaoy 評論0 收藏0

  • 淺談JavaScript 中深拷貝實(shí)現(xiàn)的方法

    摘要：相信人很多學(xué)習(xí)的過程中都踩了深拷貝和淺拷貝的坑，深拷貝和淺拷貝的區(qū)別我就不再贅述了，今天我來寫一下我自己實(shí)現(xiàn)深拷貝的各種方法。中的深拷貝也是用類似方法實(shí)現(xiàn)。 相信人很多學(xué)習(xí)js的過程中都踩了深拷貝和淺拷貝的坑，深拷貝和淺拷貝的區(qū)別我就不再贅述了，今天我來寫一下我自己實(shí)現(xiàn)深拷貝的各種方法。 比較簡單的拷貝方式可以借用瀏覽器的Json對象去實(shí)現(xiàn)，先把對象轉(zhuǎn)化為json字符串，在解析回對...

    Vicky 評論0 收藏0

  • JavaScript之淺、深拷貝

    摘要：前言里面淺拷貝和深拷貝是非常關(guān)鍵的知識點(diǎn)，今天就來通過本文清楚的了解深淺拷貝以及該如何實(shí)現(xiàn)這兩種拷貝方式。對象的拷貝又分為淺拷貝和深拷貝。印證了上述所說的對于所有的基本類型，簡單的賦值已經(jīng)是實(shí)現(xiàn)了深拷貝。 前言 JavaScript里面淺拷貝和深拷貝是非常關(guān)鍵的知識點(diǎn)，今天就來通過本文清楚的了解深淺拷貝以及該如何實(shí)現(xiàn)這兩種拷貝方式。 深淺拷貝的區(qū)別 拷貝：其實(shí)就是一個對象復(fù)制給另外...

    leanxi 評論0 收藏0

  • javascript的深拷貝VS淺拷貝

    摘要：深拷貝淺拷貝本文主要對深拷貝淺拷貝的解釋及實(shí)現(xiàn)做一下簡單記錄。之所以會有深拷貝與淺拷貝之分，是因?yàn)椴煌瑪?shù)據(jù)類型的數(shù)據(jù)在內(nèi)存中的存儲區(qū)域不一樣。但注意，只能做一層屬性的淺拷貝。 深拷貝VS淺拷貝 本文主要對深拷貝&淺拷貝的解釋及實(shí)現(xiàn)做一下簡單記錄。原文鏈接，歡迎star。 之所以會有深拷貝與淺拷貝之分，是因?yàn)椴煌瑪?shù)據(jù)類型的數(shù)據(jù)在內(nèi)存中的存儲區(qū)域不一樣。 堆和棧是計算機(jī)中劃分出來用來存儲的...

    Nekron 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<