資訊專欄INFORMATION COLUMN
摘要：網(wǎng)上有很多方法，比如對象的和的等，但是它們有一個共同的問題就是對簡單對象可以實現(xiàn)深拷貝，但是對復(fù)雜對象就不行了，比如這樣一個對象屬性值有函數(shù)數(shù)組復(fù)雜對象等這個時候剛才那幾個方法就不行了。
以前對深拷貝和淺拷貝沒有太深的印象，后來才知道是因為沒掉進(jìn)去過它的坑里。最近掉坑了才意識到它們的重要性。
閑話少敘，來說說坑：如果我需要保存一個復(fù)雜的對象 obj 并把它賦值給 originalObj ，后來對obj對象的某個屬性值進(jìn)行了修改，然后，，，我保存的初始值originalObj 也被修改了?。。?br>這個時候明眼人應(yīng)該看出問題來了：因為我給originalObj 賦值的時候用的是淺拷貝，所以修改obj 的屬性值的時候，originalObj 也跟著變了。這就是淺拷貝的直接表現(xiàn)。
那么 假如我想保存一份初始值originalObj ，不管 obj 怎么修改，都保持originalObj 始終不變，該怎么辦呢？答案就是用深拷貝。。。
網(wǎng)上有很多方法，比如Object.assign()、JSON對象的parse和stringify、JQ的extend等，但是它們有一個共同的問題就是對簡單對象可以實現(xiàn)深拷貝，但是對復(fù)雜對象就不行了，比如這樣一個對象（屬性值有函數(shù)、數(shù)組、復(fù)雜對象等）：
這個時候剛才那幾個方法就不行了。那該怎么辦呢？
這個時候就需要自己寫一個函數(shù)了：
function copyFn(obj) {
if (obj == null) { return null }
var result = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === "object") {
result[key] = copyFn(obj[key]); // 如果是對象，再次調(diào)用該方法自身
} else {
result[key] = obj[key];
}
}
}
return result;
}
然后 copy 對象的效果如下：
let obj_2 = deepCopy(obj_1); console.log(obj_1); // 修改name屬性之前，打印出來 name 也是 Edited obj_1.name = "Edited"; console.log(obj_1); // 修改name屬性之后，打印出來 name 是 Edited console.log(obj_2); // 由于是深拷貝，修改obj_1 的 name屬性之前，不影響 obj_2 的 name 屬性
希望這個用函數(shù)實現(xiàn)復(fù)雜對象的深拷貝的方法對您有所幫助！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102080.html
摘要：當(dāng)多個事件觸發(fā)的時候，會把異步事件依次的放入里等同步事件執(zhí)行完之后，再去隊列里一個個執(zhí)行拾遺常用方法總結(jié)面試的信心來源于過硬的基礎(chǔ)參考高級程序設(shè)計你所不知道的深入淺出知識點思維導(dǎo)圖經(jīng)典實例總結(jié)那些剪不斷理還亂的關(guān)系 持續(xù)不斷更新。。。 基本類型和引用類型 vue props | Primitive vs Reference Types 基本類型和字面值之間的區(qū)別 基本類型和字面值相等，...
摘要：四是在年出的持久性數(shù)據(jù)結(jié)構(gòu)的庫，持久性指的是數(shù)據(jù)一旦創(chuàng)建，就不能再被更改，任何修改或添加刪除操作都會返回一個新的對象。避免大量使用操作，這樣會浪費性能。盡量將設(shè)計成扁平狀的。 一、痛點 在我們的印象中，React 好像就意味著組件化、高性能，我們永遠(yuǎn)只需要關(guān)心數(shù)據(jù)整體，兩次數(shù)據(jù)之間的 UI 如何變化，則完全交給 React Virtual Dom 的 Diff 算法 去做。以至于我們很...
摘要：舉例需要注意的是，此時回調(diào)函數(shù)中的指向的就是數(shù)組或者對象的某一項。中提供的拷貝方法，默認(rèn)為淺拷貝，如果第一個參數(shù)為布爾值則表示深拷貝。 前言 平時開發(fā)過程中經(jīng)常會用類似each、map、forEach之類的方法，Zepto本身也把這些方法掛載到$函數(shù)身上，作為靜態(tài)方法存在，既可以給Zepto的實例使用，也能給普通的js對象使用。今天我們主要針對其提供的這些api做一些源碼實現(xiàn)分析。 源...
摘要：舉例需要注意的是，此時回調(diào)函數(shù)中的指向的就是數(shù)組或者對象的某一項。中提供的拷貝方法，默認(rèn)為淺拷貝，如果第一個參數(shù)為布爾值則表示深拷貝。 前言 平時開發(fā)過程中經(jīng)常會用類似each、map、forEach之類的方法，Zepto本身也把這些方法掛載到$函數(shù)身上，作為靜態(tài)方法存在，既可以給Zepto的實例使用，也能給普通的js對象使用。今天我們主要針對其提供的這些api做一些源碼實現(xiàn)分析。 源...
閱讀 3340·2021-11-22 14:44
閱讀 2550·2019-08-30 14:10
閱讀 2610·2019-08-30 13:12
閱讀 1227·2019-08-29 18:36
閱讀 1352·2019-08-29 16:16
閱讀 3340·2019-08-26 10:33
閱讀 1770·2019-08-23 18:16
閱讀 389·2019-08-23 18:12
