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