資訊專欄INFORMATION COLUMN
摘要：而大多數(shù)實際項目中，我們想要的結(jié)果是兩個變量初始值相同互不影響。所以就要使用到拷貝分為深淺兩種深淺拷貝的區(qū)別淺拷貝只復(fù)制一層對象的屬性，而深拷貝則遞歸復(fù)制了所有層級。
為什么會用到淺拷貝和深拷貝
首先來看一下如下代碼
let a = b = 2
a = 3
console.log(a)
console.log(b)
let c = d = [1,2,3]
let e = f = {a:1,b:2,c:3}
c[0] = 2
e.a = 2
console.log(d[0])
console.log(f.a)
你會發(fā)現(xiàn)，同一個Array或者Object賦值給兩個不同變量時，變量指向的是同一個內(nèi)存地址，所以就會造成其中一個變量改變屬性值，同時改變了另外一個變量的對應(yīng)屬性值。
而大多數(shù)實際項目中，我們想要的結(jié)果是兩個變量（初始值相同）互不影響。所以就要使用到拷貝（分為深淺兩種）深淺拷貝的區(qū)別
淺拷貝只復(fù)制一層對象的屬性，而深拷貝則遞歸復(fù)制了所有層級。淺拷貝
淺拷貝有效性針對的是單一層級對象 [1,2,3]或者{a:1,b:2}
深拷貝有效性針對的是單層或者多層級對象 [1,2,3]或者{a:1,b:2}或者[1,[1],{a:1}]或者{a:[1],b:{c:2}}
如何實現(xiàn)
// 數(shù)組
let a = [1,2]
let b = a.slice()
// {}
let e = {a:[1],b:{d:1},2}
let f = Object.create(e)
function shallowCopy (obj) {
if (typeof obj === "object" && obj !== null) {
if (Array.isArray(obj)) {
return obj.slice()
} else {
let result = {}
Object.keys(obj).forEach((item,i) = > {
console.log(i)
result[item] = obj[item]
})
return result
}
} else {
return obj
}
}
應(yīng)用場景
對于一層結(jié)構(gòu)的Array和Object想要拷貝一個副本時使用
vue的mixin是淺拷貝的一種復(fù)雜型式
如何實現(xiàn)
// 利用JSON（它能正確處理的對象是Number, String, Boolean, Array, 扁平對象）
let g = JSON.parse(JSON.stringify(obj))
// 適用于
function deepCopy (obj) {
if (typeof obj === "object" && obj !== null) {
let objKeys = Object.keys(obj)
let result
if (Array.isArray(obj)) {
result = []
} else {
if (obj.constructor === Object) {
result = {}
} else {
return obj
}
}
objKeys.forEach((item) => {
if (typeof obj[item] === "object" && obj[item] !== null) {
switch (obj[item].constructor) {
case Array:
result[item] = deepCopy(obj[item])
break
case Object:
result[item] = deepCopy(obj[item])
break
case Date:
result[item] = new Date(obj[item])
break
case RegExp:
let attributes = ""
attributes += obj[item].global ? "g" : ""
attributes += obj[item].ignoreCase ? "g" : ""
attributes += obj[item].multiline ? "g" : ""
result[item] = new RegExp(obj[item].source, attributes);
break
default:
result[item] = obj[item]
break
}
} else {
result[item] = obj[item]
}
})
return result
} else {
return obj
}
}
應(yīng)用場景
復(fù)制深層次的object數(shù)據(jù)結(jié)構(gòu)
對深拷貝的應(yīng)用想法
在實際工作中是不是用繼承來實現(xiàn)更好？需要大家來討論，提意見
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93332.html
摘要：而大多數(shù)實際項目中，我們想要的結(jié)果是兩個變量初始值相同互不影響。所以就要使用到拷貝分為深淺兩種深淺拷貝的區(qū)別淺拷貝只復(fù)制一層對象的屬性，而深拷貝則遞歸復(fù)制了所有層級。 為什么會用到淺拷貝和深拷貝 首先來看一下如下代碼 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e = f = {a:...
摘要：而大多數(shù)實際項目中，我們想要的結(jié)果是兩個變量初始值相同互不影響。所以就要使用到拷貝分為深淺兩種深淺拷貝的區(qū)別淺拷貝只復(fù)制一層對象的屬性，而深拷貝則遞歸復(fù)制了所有層級。 為什么會用到淺拷貝和深拷貝 首先來看一下如下代碼 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e = f = {a:...
摘要：在中可以通過添加一個參數(shù)來實現(xiàn)遞歸，調(diào)用就可以實現(xiàn)一個深拷貝。利用序列化實現(xiàn)一個深拷貝 在JavaScript中，對于Object和Array這類引用類型值，當(dāng)從一個變量向另一個變量復(fù)制引用類型值時，這個值的副本其實是一個指針，兩個變量指向同一個堆對象，改變其中一個變量，另一個也會受到影響。 這種拷貝分為兩種情況：拷貝引用和拷貝實例，也就是我們說的淺拷貝和深拷貝 淺拷貝（shallow...
摘要：淺拷貝和淺拷貝的問題，不僅在日常應(yīng)用中需要注意，而且在面試和筆試中也常被用來考察應(yīng)聘者，屬于文體兩開花的?；緮?shù)據(jù)類型引用數(shù)據(jù)類型等等基本數(shù)據(jù)類型是按值訪問的，對其的拷貝會直接復(fù)制其值保存在新變量中。方法手工遍歷法方法方法方法方法 淺拷貝和淺拷貝的問題，不僅在日常應(yīng)用中需要注意，而且在面試和筆試中也常被用來考察應(yīng)聘者，屬于文體兩開花的points。 什么是深拷貝和淺拷貝呢？ 名稱 ...
閱讀 3575·2023-04-25 14:20
閱讀 1196·2021-09-10 10:51
閱讀 1154·2019-08-30 15:53
閱讀 463·2019-08-30 15:43
閱讀 2316·2019-08-30 14:13
閱讀 2797·2019-08-30 12:45
閱讀 1207·2019-08-29 16:18
閱讀 1166·2019-08-29 16:12
