JavaScript中的深淺拷貝

dantezhao 發布于2019-08-23 11:28 / 699人閱讀

摘要：深淺拷貝從上面的例子可以發現，如果給一個變量賦值一個對象，那么兩者的值會是同一個引用，其中一方改變，另一方也會相應改變。此時需要深拷貝上場深拷貝深拷貝最簡單的實現辦法就是使用來解決。發現只拷貝了而忽略了和。

深淺拷貝

let a = {
    age: 1
}
let b = a
a.age = 2
console.log(b.age) // 2

從上面的例子可以發現，如果給一個變量賦值一個對象，那么兩者的值會是同一個引用，其中一方改變，另一方也會相應改變。

解決這個問題，可以引入淺拷貝：

淺拷貝

可以使用Object.assign 來解決這個問題

let a = {
    age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1

使用ES6展開運算符(...)解決

let a = {
    age: 1
}
let b = {...a}
a.age = 2
console.log(b.age) // 1

通常淺拷貝能解決大部分的問題，但是當遇到，對象里面嵌套一個對象的時候，就需要用到深拷貝了

let a = {
    age: 1,
    name: {
        first: "black"
    }
}
let = {...a}
a.name.first = "guyue"
console.log(b.name.first) // guyue

這樣說明淺拷貝并沒有對嵌套的對象生效。此時需要深拷貝上場：

深拷貝

深拷貝最簡單的實現辦法就是使用JSON.parse(JSON.stringify(object)) 來解決。

let a = {
    age: 1,
    name: {
        first: "black"
    }
}
let b = JSON.parse(JSON.stringify(a))
a.name.first = "guyue"
console.log(b.name.first) // black

但是當出現以下幾種情況的時候，會出現問題：

let obj = {
    a: 1,
    b: {
        c: 2
    }
}
obj.c = obj.b
obj.d = obj.a
obj.b.c = obj.c
let newObj = JSON.parse(JSON.stringify(obj))
console.log(newObj)
// Uncaught TypeError: Converting circular structure to JSON

報錯了，不能解決循環引用對象的問題。

let obj = {
       age: undefined,
    sex: function(){},
    name: "black"
}
let newObj = JSON.parse(JSON.stringify(obj))
console.log(newObj) // {name: "black"}

發現只拷貝了name ,而忽略了undefined和funcion。

所以，JSON.parse(JSON.stringify(obj))遇到這幾種情況會出現問題：

不會拷貝 undefined

不能拷貝函數

不能解決循環引用的對象

所以采用下面的方式：

function deepClone(obj) {
    let res = obj instanceof Array ? [] : {}
    for(let k in obj) {
        res[k] = obj[k]
        if(typeof obj[k] === Object) {
            deepClone(obj[k])
        }
    }
    return res
}

let obj = {
       age: undefined,
    sex: function(){},
    name: "black"
}

let newObj = deepClone(obj)
console.log(newObj) // {age: undefined, sex: ?, name: "black"}

可以采用ES2017的新語法：

function copyObject(orig) {
  return Object.create(
    Object.getPrototypeOf(orig),
    Object.getOwnPropertyDescriptors(orig)
  );
}

let obj = {
       age: undefined,
    sex: function(){},
    name: "black"
}

let newObj = copyObject(obj)
console.log(newObj) // {age: undefined, sex: ?, name: "black"}

云服務器 GPU云服務器深淺拷貝 javascript淺拷貝 javascript深拷貝 javascript中的

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

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

Javascript對象的深淺拷貝

摘要：開門見山，有人叫對象的復制為深復制淺復制，也有人叫深拷貝淺拷貝。高級屬性修改深拷貝滿足對象的復制，淺拷貝影響原數組。關于對象的深淺拷貝，暫且探索到這里，后續有新發現再進行補充。 showImg(https://segmentfault.com/img/remote/1460000014305581); 開門見山，有人叫對象的復制為深復制淺復制，也有人叫深拷貝淺拷貝。其實都是copy。 ...

qieangel2013 2019-08-22 16:12 評論0 收藏0
JavaScript 中的深淺拷貝

摘要：基本類型指的是簡單的數據段，而引用類型指的是一個對象保存在堆內存中的地址，不允許我們直接操作內存中的地址，也就是說不能操作對象的內存空間，所以，我們對對象的操作都只是在操作它的引用而已。工作中經常會遇到需要復制 JavaScript 數據的時候，遇到 bug 時實在令人頭疼；面試中也經常會被問到如何實現一個數據的深淺拷貝，但是你對其中的原理清晰嗎？一起來看一下吧！一、為什么會有深淺...

Tonny 2019-08-23 14:13 評論0 收藏0
復習Javascript專題（四）：js中的深淺拷貝

摘要：基本數據類型的復制很簡單，就是賦值操作，所以深淺拷貝也是針對，這類引用類型數據。它會拋棄對象的。另外，查資料過程中還看到這么一個詞結構化克隆算法還有這一篇資料也有參考，也寫得比較詳細了的深淺拷貝基本數據類型的復制很簡單，就是賦值操作，所以深淺拷貝也是針對Object，Array這類引用類型數據。淺拷貝對于字符串來說，是值的復制，而對于對象來說則是對對象地址的復制；而深拷貝的話，它不...

MobService 2019-08-23 13:40 評論0 收藏0
深淺拷貝

摘要：深復制實現代碼如下第一種方法通過遞歸解析解決第二種方法通過解析解決作者六師兄鏈接原生深拷貝的實現處理未輸入新對象的情況通過方法構造新的對象深淺拷貝針對的是對象類型，如果是字符串的數組用[...arr]，還是不會影響要區分針對數組的深淺拷貝(默認情況為里面沒有對象的數組)，與針對對象的深淺拷貝 JavaScript數組深拷貝和淺拷貝的兩種方法 let a1 = [1, 2]; ...

Karrdy 2019-08-23 15:42 評論0 收藏0
JavaScript基礎心法——深淺拷貝

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

keithxiaoy 2019-08-21 17:22 評論0 收藏0