您好,登錄后才能下訂單哦!
這篇文章主要介紹了JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn)方法是什么的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn)方法是什么文章都會(huì)有所收獲,下面我們一起來(lái)看看吧。
JavaScript 中的淺拷貝和深拷貝指的是在復(fù)制對(duì)象(包括對(duì)象、數(shù)組等)時(shí),是否只復(fù)制對(duì)象的引用地址或者在復(fù)制時(shí)創(chuàng)建一個(gè)新的對(duì)象。具體區(qū)別如下:
淺拷貝:淺拷貝只拷貝基本類型的數(shù)據(jù),而符合類型的數(shù)據(jù)只復(fù)制指向其的指針,而不復(fù)制對(duì)象本身,新舊對(duì)象還是共享同一塊內(nèi)存。這意味著如果原始對(duì)象的屬性或子對(duì)象發(fā)生更改,則復(fù)制的對(duì)象也會(huì)受到影響。常見(jiàn)的實(shí)現(xiàn)方式包括使用 Object.assign()方法、展開(kāi)運(yùn)算符(…)以及循環(huán)遍歷對(duì)象并將其屬性復(fù)制到新對(duì)象中。
深拷貝:深拷貝會(huì)另外創(chuàng)造一個(gè)一模一樣的對(duì)象,新對(duì)象跟原對(duì)象不共享內(nèi)存,修改新對(duì)象不會(huì)改到原對(duì)象。
當(dāng)我們進(jìn)行 JavaScript 對(duì)象或數(shù)組的淺拷貝時(shí),它只會(huì)復(fù)制其基本值的引用,而不是完全復(fù)制內(nèi)容。也就是說(shuō),淺拷貝只是復(fù)制了原始對(duì)象的屬性/元素的引用,并沒(méi)有新建一個(gè)對(duì)象。
例如,如果我們有一個(gè)簡(jiǎn)單的對(duì)象:
const obj = { name: 'John', age: 30 };
然后我們使用對(duì)象的賦值語(yǔ)法來(lái)創(chuàng)建一個(gè)淺拷貝:
const newObj = obj;
此時(shí),newObj
和 obj
都指向同一個(gè)內(nèi)存地址。如果我們改變 newObj
的某個(gè)屬性,那么 obj
的相應(yīng)屬性也會(huì)發(fā)生改變。
newObj.age = 40; console.log(obj.age); // 輸出 40
這是因?yàn)?newObj
和 obj
指向的是同一個(gè)內(nèi)存地址,所以任何更改都會(huì)反映在另一個(gè)變量上。
類似地,在數(shù)組中進(jìn)行淺拷貝也會(huì)產(chǎn)生相同的效果:
const arr = [1, 2, 3]; const newArr = arr; newArr.push(4); console.log(arr); // 輸出 [1, 2, 3, 4]
淺拷貝可以使用 Object.assign() 或者展開(kāi)運(yùn)算符 … 來(lái)實(shí)現(xiàn);
/** * 淺拷貝 * * @param {Object} target 目標(biāo)對(duì)象 * @param {Object} source 源對(duì)象 * @return {Object} 返回目標(biāo)對(duì)象 */ function extend(target, source) { for (var key in source) { if (source.hasOwnProperty(key)) { var value = source[key]; if (typeof value !== 'undefined') { target[key] = value; } } } return target; }
相比于淺拷貝,深拷貝會(huì)復(fù)制整個(gè)對(duì)象或數(shù)組,包括其所有的嵌套子對(duì)象和數(shù)組。這意味著新創(chuàng)建的對(duì)象與原始對(duì)象沒(méi)有任何關(guān)聯(lián),改變其中一個(gè)對(duì)象不會(huì)影響另一個(gè)。
例如,如果我們使用 JavaScript 的內(nèi)置函數(shù) JSON.parse()
和 JSON.stringify()
來(lái)進(jìn)行深拷貝:
const obj = { name: 'John', age: 30 }; const newObj = JSON.parse(JSON.stringify(obj)); newObj.age = 40; console.log(obj.age); // 輸出 30
在這個(gè)例子中,先使用 JSON.stringify()
將原始對(duì)象序列化為字符串,再使用 JSON.parse()
將其解析為新對(duì)象。由于字符串是基本類型的值,而非引用類型,因此 newObj
是一個(gè)全新的對(duì)象,與 obj
沒(méi)有關(guān)系。
類似地,在數(shù)組中進(jìn)行深拷貝也會(huì)產(chǎn)生相同的效果:
const arr = [1, [2, 3], [4, [5]]]; const newArr = JSON.parse(JSON.stringify(arr)); newArr[1][0] = 6; console.log(arr[1][0]); // 輸出 2
在這個(gè)例子中,通過(guò)深拷貝創(chuàng)建了一個(gè)新數(shù)組,并且修改新數(shù)組中嵌套數(shù)組的元素時(shí),原始數(shù)組并不會(huì)受到影響。
深拷貝可以使用 JSON.parse(JSON.stringify(obj))、遞歸復(fù)制對(duì)象屬性、第三方庫(kù)如 lodash 的 deepClone 等方式來(lái)實(shí)現(xiàn)。但需注意的是,這些方法也有可能存在一些限制和缺陷,比如不能處理函數(shù)、循環(huán)引用等問(wèn)題。
function deepCopy(obj) { var result, copy; if (obj.constructor === Object) result = {}; //判斷傳入的如果是對(duì)象,繼續(xù)遍歷 else if (Array.isArray(obj)) result = []; //判斷傳入的如果是數(shù)組,繼續(xù)遍歷 else return obj; //如果是基本數(shù)據(jù)類型就直接返回 for (var key in obj) { if(obj.hasOwnProperty(key)){ copy = obj[key]; if(copy===null){ break; } if(typeof copy ==='undefined'){ result[key]=undefined; }else if (getType(copy) == "Object"||getType(copy) == "Array") result[key] = deepCopy(copy); //遞歸方法 else result[key] = copy; //基本數(shù)據(jù)類型則賦值給屬性 } } return result; }
/** * 深拷貝 * @param obj * @param appeard * @returns {*[]|any} */ deepCopy(obj, appeard = new Map()) { if (!(obj instanceof Object)) return obj; //如果是原始數(shù)據(jù)類型 if (appeard.has(obj)) return appeard.get(obj); //如果已經(jīng)出現(xiàn)過(guò) let result = Array.isArray(obj) ? [] : {}; appeard.set(obj, result); //將新對(duì)象放入map //遍歷所有屬性進(jìn)行遞歸拷貝 [...Object.keys(obj), ...Object.getOwnPropertySymbols(obj)].forEach(key => (result[key] = this.deepCopy(obj[key], appeard))); return result; }
關(guān)于“JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn)方法是什么”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn)方法是什么”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。