JavaScript的深淺拷貝

zhunjiee 發布于2019-08-22 15:55 / 546人閱讀

摘要：什么是深淺概念深拷貝淺拷貝只針對像這樣的對象，對于基本類型而言，可以理解為是沒有深淺的區別的。和指向了同一塊內存深拷貝重新開辟了一個空間，修改對象的屬性，彼此不會影響。并不會更改使用遞歸適用于對象里面有對象

什么是深淺 概念

深拷貝、淺拷貝只針對像Object/Array這樣的對象，對于基本類型而言，可以理解為是沒有深淺的區別的。

淺拷貝復制的是引用，修改對象的屬性，會彼此影響。

just like this

let a = {name: "ziv"}
let b = a // a和b指向了同一塊內存
b.name = "lucky"
console.log(a.name) // "lucky"
console.log(b.name) // "lucky"

深拷貝重新開辟了一個空間，修改對象的屬性，彼此不會影響。

實現淺拷貝 使用內置的方法

// Object.assign()
//只能用于淺拷貝對象或者合并對象
let obj = {a:"x", b: {c: "y"}}
let newObj = Object.assign({}, obj)
obj.b.c = "z"
console.log(newObj) // {a:"x", b: {c: "z"}}

// Array.from() 
// ...操作符
// slice()
// concat() 用于數組

let arr = [1,2, [3,4,5]]
let sliceArr = arr.slice()
let concatArr = arr.concat()
let fromArr = Array.from(arr)
let newArr = [...arr]

arr[2][1] = "sixsix"

console.log(sliceArr) // [1,2,[3,"sixsix",5]]
console.log(concatArr) // [1,2,[3,"sixsix",5]]
console.log(fromArr) // [1,2,[3,"sixsix",5]]

使用遍歷

// 對象淺拷貝
let shallowCopy = function(obj) {
    // 如果不是對象，不執行拷貝
    if (typeof obj !== "object") return 
    // 判斷對象是數組還是對象
    let newObj = obj instanceof Array ? [] : {}
    // 遍歷obj
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            // 拷貝到新對象中
            newObj[key] = obj[key]
        }
    }
    return newObj
}

實現深拷貝 序列化反序列化

// 適用于數組還有對象，但是對于函數對象、正則對象、稀疏數組等無法進行深拷貝（而且會直接丟失相應的值），并且會拋棄對象的constructor，也就是說無論這個函數的構造函數是誰，使用這種拷貝之后，constructor都會變成Object。對循環引用同樣無法處理。
let arr = ["old", 1, true, ["old1", "old2"], {old: 1}]

let new_arr = JSON.parse(JSON.stringify(arr))
arr[3][0] = "new1" // new_arr并不會更改
console.log(new_arr)

使用遞歸

// 適用于對象里面有對象
let deepCopy = function(obj) {
    if (typeof obj !== "object") return obj
    let newObj = obj instanceof Array ? [] : {}
    
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === "object" ? deepCopy(obj[key]) : obj[key]
        }
    }
    return newObj
}

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

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

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

Javascript對象的深淺拷貝

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

qieangel2013 2019-08-22 16:12 評論0 收藏0
JavaScript專題之深淺拷貝

摘要：專題系列第六篇，講解深淺拷貝的技巧和以及實現深淺拷貝的思路前言拷貝也是面試經典吶數組的淺拷貝如果是數組，我們可以利用數組的一些方法比如返回一個新數組的特性來實現拷貝。所以我們可以看出使用和是一種淺拷貝。 JavaScript 專題系列第六篇，講解深淺拷貝的技巧和以及實現深淺拷貝的思路前言拷貝也是面試經典吶！數組的淺拷貝如果是數組，我們可以利用數組的一些方法比如：slice、co...

RancherLabs 2019-08-21 11:47 評論0 收藏0
javascript之深淺拷貝

摘要：為何寫最近在研究深淺拷貝，找了很多資料，感覺不是很滿意，所以自己就整理了一份。深拷貝如果給放到新的內存中，將的各個屬性都復制到新內存里，就是深拷貝。安全的值是指能夠呈現為有效格式的值。參考文檔冴羽的專題之深淺拷貝深拷貝與淺拷貝的實現為何寫：最近在研究深淺拷貝，找了很多資料，感覺不是很滿意，所以自己就整理了一份。廢話不多說，我們來一起復習一下吧，也希望留下您寶貴意見。何為深淺拷貝？...

LMou 2019-08-26 11:34 評論0 收藏0
深淺拷貝

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

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

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

MobService 2019-08-23 13:40 評論0 收藏0