js淺拷貝及深拷貝的幾種方法

wing324 發布于2019-08-23 16:44 / 1235人閱讀

摘要：但這兩種拷貝有一個問題就是只能賦值一層，假設我們有如下數據結構臧三小明小芳我們會發現打印出的結果如下上圖可看出的結果均變了，這并不是我們想要的結果，所以我們要用到深拷貝。

一個項目開發中經常會用到需要復制一個對象或者數組，但是卻不能改變原始對象，所以就要用到拷貝，拷貝又分深拷貝和淺拷貝，今天列舉一下幾種拷貝形式。

一、淺拷貝 (1) Object.assign()

Object.assign我們經常會用到合并對象，當然利用Object.assign性質我們也可以實現對象的拷貝。

var obj1 = {a: 1, b: 2}
 
var obj2 = Object.assign({}, obj1)
 
obj2.a = 4
 
console.log(obj1, obj2)

結果如圖：

這里要注意的是Object.assign第一個參數必須是個空對象

(2) 解構賦值

var obj1 = {a: 1, b: 2}
 
var obj2 = {...obj1}
 
obj2.a = 4
 
console.log(obj1, obj2)

結果如圖：

這里一樣可以實現之前上面的結果。

但這兩種拷貝有一個問題就是只能賦值一層，假設我們有如下數據結構

var obj1 = [{
    name: "臧三",
    childs: ["小明", "小芳"]
}]
 
var obj2 = [...obj1]
 
obj2[0].childs = []
 
console.log(obj1, obj2)

我們會發現打印出的結果如下：

上圖可看出obj1,obj2 的結果均變了，這并不是我們想要的結果，所以我們要用到深拷貝。

二、深拷貝 (1) 利用json.stringify

var obj1 = [{
    name: "臧三",
    childs: ["小明", "小芳"]
}]
 
var obj2 = JSON.parse(JSON.stringify(obj1))
 
obj2[0].childs = []
 
console.log(obj1, obj2)

結果如下:

這樣的話就能達到我們想要的結果。

這種方法簡單，但也有弊端，看看下面的數據結構：

var obj1 = [{
    name: "臧三",
    childs: ["小明", "小芳"],
    fn: function() {},
    age: undefined
}]
 
var obj2 = JSON.parse(JSON.stringify(obj1))
 
obj2[0].childs = []
 
console.log(obj1, obj2)

結果：

我們從結果中發現，值為undefined,或者function的時候并不會拷貝過來。

(2) 利用遞歸來實現一個方法進行拷貝

var obj1 = [{
    name: "臧三",
    childs: ["小明", "小芳"],
    fn: function() {},
    age: undefined
}]
 
var obj2 = extend(obj1)
 
obj2[0].childs = []
 
console.log(obj1, obj2)
 
function extend(data) {
    if (typeof data === "object" && data) {
        let val = typeof data.length === "number" ? [] : {}
        for(let i in data) {
            val[i] = extend(data[i])
        }
        return val
    } else {
        return data
    }
}

結果：

這樣我們就能把所有值都拷貝過來。

云服務器 GPU云服務器深拷貝和淺拷貝淺拷貝 js緩存的幾種方法 javascript淺拷貝

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

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

js的淺拷貝和深拷貝

摘要：拷貝分為淺拷貝和深拷貝。淺拷貝是引用復制，深拷貝是完全單純拷貝數據的值。所以，這種方法只是簡單繞過第一層箱子的引用復制深拷貝目前比較好的方法就是大法，要么就是自己寫遞歸的深拷貝函數。附帶深拷貝的自定義函數源自大佬的經常遇到數組或對象等引用類型作為函數的參數的情況，但又不想修改原來的數據，這時候就需要拷貝（基本類型的變量不需要考慮）。拷貝分為淺拷貝和深拷貝。淺拷貝是引用復制，深拷貝是完...

jsliang 2019-08-23 10:26 評論0 收藏0
前端基礎匯總

摘要：及相關問題數據類型函數中指向原型作用域閉包面向對象對象創建模式繼承嚴格模式與對象轉換的方法添加屬性，根據原型創建區別新特性解構賦值簡化對象寫法剪頭函數三點運算符模板字符串形參默認值異步過程深拷貝與淺拷貝賦值與淺拷貝的區別淺拷貝的幾種方法實現 js及es相關問題數據類型函數中this指向——————原型作用域閉包——————面向對象對象創建模式繼承——————Es5嚴格模式Json與j...

2json 2019-08-23 16:58 評論0 收藏0
前端基礎匯總

摘要：及相關問題數據類型函數中指向原型作用域閉包面向對象對象創建模式繼承嚴格模式與對象轉換的方法添加屬性，根據原型創建區別新特性解構賦值簡化對象寫法剪頭函數三點運算符模板字符串形參默認值異步過程深拷貝與淺拷貝賦值與淺拷貝的區別淺拷貝的幾種方法實現 js及es相關問題數據類型函數中this指向——————原型作用域閉包——————面向對象對象創建模式繼承——————Es5嚴格模式Json與j...

laznrbfe 2019-08-29 18:38 評論0 收藏0
js深度克隆的幾種方法

摘要：方法一老老實實敲代碼法迭代法，適用于所有方法二利用將對象序列化字符串，再使用來反序列化還原對象缺點如果里面有時間對象，則后再的結果，時間將只是字符串的形式。簡而言之，第一層實現了深度拷貝，后續層次還是淺拷貝方法一老老實實敲代碼法（迭代法，適用于所有） function deepClone(obj) { let newObj = Array.isArray(obj) ? [...

Pluser 2019-08-26 10:22 評論0 收藏0
面試小結（一）

摘要：面試問到的問題繼承的幾種方法，，原形繼承面向對象的幾種方法五種方式對象字面量創建實例對象構造函數工廠模式用一個函數，通過傳遞參數返回對象。打包原理打包原理把所有依賴打包成一個文件，通過代碼分割成單元片段并按需加載。面試問到的問題：1、繼承的幾種方法； Call，apply，原形繼承； 2、面向對象的幾種方法；五種方式： 1）對象字面量：var obj={}; 2）創建實例對象：va...

xiaodao 2019-08-29 15:35 評論0 收藏0