JavaScript：利用遞歸實現對象深拷貝

Airy 發布于2019-08-23 10:49 / 769人閱讀

摘要：先來普及一下深拷貝和淺拷貝的區別淺拷貝就是簡單的復制，用等號即可完成這就完成了一個淺拷貝但是當修改對象的時候，我們發現對象的值也被改變了這是因為淺拷貝只復制了指向對象的指針，新舊對象共用同一塊內存，修改某一個對象的同時也會把另一個都一并修改

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

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

這就完成了一個淺拷貝
但是當修改對象b的時候，我們發現對象a的值也被改變了

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

這是因為淺拷貝只復制了指向對象的指針，新舊對象共用同一塊內存，修改某一個對象的同時也會把另一個都一并修改了

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

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

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

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

對于這種比較復雜的對象，我們就可以利用遞歸的方式實現真正的對象深拷貝了

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
}

簡單的幾行代碼就可以輕松實現對象的深拷貝

簡單的測試代碼，如下：
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函數庫**
使用方法：
npm install lodash
**es5寫法**
let lodash = require("lodash")
**es6寫法**
import lodash from "lodash"

let targetOj = lodash.cloneDeep(sourceObj)

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

云服務器 GPU云服務器 javascript深拷貝深拷貝深拷貝和淺拷貝 javascript淺拷貝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96712.html

JavaScript中的淺拷貝和深拷貝

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

ernest.wang 2019-08-21 11:34 評論0 收藏0
JavaScript基礎心法——深淺拷貝

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

keithxiaoy 2019-08-21 17:22 評論0 收藏0
淺談JavaScript 中深拷貝實現的方法

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

Vicky 2019-08-20 13:50 評論0 收藏0
JavaScript之淺、深拷貝

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

leanxi 2019-08-26 10:37 評論0 收藏0
javascript的深拷貝VS淺拷貝

摘要：深拷貝淺拷貝本文主要對深拷貝淺拷貝的解釋及實現做一下簡單記錄。之所以會有深拷貝與淺拷貝之分，是因為不同數據類型的數據在內存中的存儲區域不一樣。但注意，只能做一層屬性的淺拷貝。深拷貝VS淺拷貝本文主要對深拷貝&淺拷貝的解釋及實現做一下簡單記錄。原文鏈接，歡迎star。之所以會有深拷貝與淺拷貝之分，是因為不同數據類型的數據在內存中的存儲區域不一樣。堆和棧是計算機中劃分出來用來存儲的...

Nekron 2019-08-23 15:08 評論0 收藏0