資訊專(zhuān)欄INFORMATION COLUMN
摘要：但這兩種拷貝有一個(gè)問(wèn)題就是只能賦值一層，假設(shè)我們有如下數(shù)據(jù)結(jié)構(gòu)臧三小明小芳我們會(huì)發(fā)現(xiàn)打印出的結(jié)果如下上圖可看出的結(jié)果均變了，這并不是我們想要的結(jié)果，所以我們要用到深拷貝。
一個(gè)項(xiàng)目開(kāi)發(fā)中經(jīng)常會(huì)用到需要復(fù)制一個(gè)對(duì)象或者數(shù)組，但是卻不能改變?cè)紝?duì)象，所以就要用到拷貝，拷貝又分深拷貝和淺拷貝，今天列舉一下幾種拷貝形式。
一、淺拷貝 (1) Object.assign()Object.assign我們經(jīng)常會(huì)用到合并對(duì)象，當(dāng)然利用Object.assign性質(zhì)我們也可以實(shí)現(xiàn)對(duì)象的拷貝。
var obj1 = {a: 1, b: 2}
var obj2 = Object.assign({}, obj1)
obj2.a = 4
console.log(obj1, obj2)
結(jié)果如圖：
這里要注意的是Object.assign第一個(gè)參數(shù)必須是個(gè)空對(duì)象
(2) 解構(gòu)賦值var obj1 = {a: 1, b: 2}
var obj2 = {...obj1}
obj2.a = 4
console.log(obj1, obj2)
結(jié)果如圖：
這里一樣可以實(shí)現(xiàn)之前上面的結(jié)果。
但這兩種拷貝有一個(gè)問(wèn)題就是只能賦值一層，假設(shè)我們有如下數(shù)據(jù)結(jié)構(gòu)
var obj1 = [{
name: "臧三",
childs: ["小明", "小芳"]
}]
var obj2 = [...obj1]
obj2[0].childs = []
console.log(obj1, obj2)
我們會(huì)發(fā)現(xiàn)打印出的結(jié)果如下：
上圖可看出obj1,obj2 的結(jié)果均變了，這并不是我們想要的結(jié)果，所以我們要用到深拷貝。
二、深拷貝 (1) 利用json.stringifyvar obj1 = [{
name: "臧三",
childs: ["小明", "小芳"]
}]
var obj2 = JSON.parse(JSON.stringify(obj1))
obj2[0].childs = []
console.log(obj1, obj2)
結(jié)果如下:
這樣的話就能達(dá)到我們想要的結(jié)果。
這種方法簡(jiǎn)單，但也有弊端，看看下面的數(shù)據(jù)結(jié)構(gòu)：
var obj1 = [{
name: "臧三",
childs: ["小明", "小芳"],
fn: function() {},
age: undefined
}]
var obj2 = JSON.parse(JSON.stringify(obj1))
obj2[0].childs = []
console.log(obj1, obj2)
結(jié)果：
我們從結(jié)果中發(fā)現(xiàn)，值為undefined,或者function的時(shí)候并不會(huì)拷貝過(guò)來(lái)。
(2) 利用遞歸來(lái)實(shí)現(xiàn)一個(gè)方法進(jìn)行拷貝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
}
}
結(jié)果：
這樣我們就能把所有值都拷貝過(guò)來(lái)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103224.html
摘要：拷貝分為淺拷貝和深拷貝。淺拷貝是引用復(fù)制，深拷貝是完全單純拷貝數(shù)據(jù)的值。所以，這種方法只是簡(jiǎn)單繞過(guò)第一層箱子的引用復(fù)制深拷貝目前比較好的方法就是大法，要么就是自己寫(xiě)遞歸的深拷貝函數(shù)。附帶深拷貝的自定義函數(shù)源自大佬的 經(jīng)常遇到數(shù)組或?qū)ο蟮纫妙?lèi)型作為函數(shù)的參數(shù)的情況，但又不想修改原來(lái)的數(shù)據(jù)，這時(shí)候就需要拷貝（基本類(lèi)型的變量不需要考慮）?？截惙譃闇\拷貝和深拷貝。淺拷貝是引用復(fù)制，深拷貝是完...
摘要：及相關(guān)問(wèn)題數(shù)據(jù)類(lèi)型函數(shù)中指向原型作用域閉包面向?qū)ο髮?duì)象創(chuàng)建模式繼承嚴(yán)格模式與對(duì)象轉(zhuǎn)換的方法添加屬性，根據(jù)原型創(chuàng)建區(qū)別新特性解構(gòu)賦值簡(jiǎn)化對(duì)象寫(xiě)法剪頭函數(shù)三點(diǎn)運(yùn)算符模板字符串形參默認(rèn)值異步過(guò)程深拷貝與淺拷貝賦值與淺拷貝的區(qū)別淺拷貝的幾種方法實(shí)現(xiàn) js及es相關(guān)問(wèn)題 數(shù)據(jù)類(lèi)型函數(shù)中this指向——————原型作用域閉包——————面向?qū)ο髮?duì)象創(chuàng)建模式繼承——————Es5嚴(yán)格模式Json與j...
摘要：及相關(guān)問(wèn)題數(shù)據(jù)類(lèi)型函數(shù)中指向原型作用域閉包面向?qū)ο髮?duì)象創(chuàng)建模式繼承嚴(yán)格模式與對(duì)象轉(zhuǎn)換的方法添加屬性，根據(jù)原型創(chuàng)建區(qū)別新特性解構(gòu)賦值簡(jiǎn)化對(duì)象寫(xiě)法剪頭函數(shù)三點(diǎn)運(yùn)算符模板字符串形參默認(rèn)值異步過(guò)程深拷貝與淺拷貝賦值與淺拷貝的區(qū)別淺拷貝的幾種方法實(shí)現(xiàn) js及es相關(guān)問(wèn)題 數(shù)據(jù)類(lèi)型函數(shù)中this指向——————原型作用域閉包——————面向?qū)ο髮?duì)象創(chuàng)建模式繼承——————Es5嚴(yán)格模式Json與j...
摘要：方法一老老實(shí)實(shí)敲代碼法迭代法，適用于所有方法二利用將對(duì)象序列化字符串，再使用來(lái)反序列化還原對(duì)象缺點(diǎn)如果里面有時(shí)間對(duì)象，則后再的結(jié)果，時(shí)間將只是字符串的形式。簡(jiǎn)而言之，第一層實(shí)現(xiàn)了深度拷貝，后續(xù)層次還是淺拷貝 方法一 老老實(shí)實(shí)敲代碼法（迭代法，適用于所有） function deepClone(obj) { let newObj = Array.isArray(obj) ? [...
摘要：面試問(wèn)到的問(wèn)題繼承的幾種方法，，原形繼承面向?qū)ο蟮膸追N方法五種方式對(duì)象字面量創(chuàng)建實(shí)例對(duì)象構(gòu)造函數(shù)工廠模式用一個(gè)函數(shù)，通過(guò)傳遞參數(shù)返回對(duì)象。打包原理打包原理把所有依賴(lài)打包成一個(gè)文件，通過(guò)代碼分割成單元片段并按需加載。 面試問(wèn)到的問(wèn)題：1、繼承的幾種方法； Call，apply，原形繼承； 2、面向?qū)ο蟮膸追N方法； 五種方式： 1）對(duì)象字面量：var obj={}; 2）創(chuàng)建實(shí)例對(duì)象：va...
閱讀 2958·2021-11-24 09:39
閱讀 2869·2021-09-29 09:34
閱讀 3561·2021-09-24 10:23
閱讀 1746·2021-09-22 15:41
閱讀 1701·2019-08-30 15:55
閱讀 3516·2019-08-30 13:58
閱讀 2624·2019-08-30 13:11
閱讀 1669·2019-08-29 12:31
