JS實現(xiàn)深拷貝的幾種簡單方法示例
更新時間：2023年10月07日 15:20:51 作者：溫其如玉_zxh
深拷貝和淺拷貝是在JavaScript中復制對象或數(shù)組時經常遇到的概念,下面這篇文章主要給大家介紹了關于JS實現(xiàn)深拷貝的幾種簡單方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
一、使用 JSON 轉換
這是最簡單的方法。
JSON.parse(JSON.stringify(obj))
二、使用遞歸
通過遞歸的方式深度遍歷對象，將每個屬性的值進行復制。需要處理被復制對象為值類型的情況以及屬性值中包含對象的情況。需要注意的是，為了防止循環(huán)引用導致死循環(huán)，需要記錄已經遍歷過的對象。
const deepClone = obj => {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
let result = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
result[key] = deepClone(obj[key]);
}
}
return result;
}三、借助插件
Lodash
Lodash 是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。
npm i --save lodash
import {cloneDeep} from 'lodash';const obj1 = {a: {b: 2}};
const obj2 = cloneDeep(obj1);總結
到此這篇關于JS實現(xiàn)深拷貝的幾種簡單方法的文章就介紹到這了,更多相關JS實現(xiàn)深拷貝內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
javascript removeChild 導致的內存泄漏
最近看到司徒正美的一篇文章《移除DOM節(jié)點》，文中說到在IE中移除容器類節(jié)點，會引起內存泄露。2010-08-08
這篇文章主要介紹了詳解webpack運行Babel教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
沒事寫個尋路的，很簡單，有需要的朋友可以參考下。2009-08-08
下面小編就為大家?guī)硪黄斦刯s對url進行編碼和解碼(三種方式的區(qū)別)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了基于JS實現(xiàn)根據(jù)密碼長度顯示安全條功能，非常不錯，在一些網站上經常會遇到此功能，需要的的朋友參考下實現(xiàn)代碼吧2017-03-03
兼容ie和firefox的鼠標經過(onmouseover和onmouseout)實現(xiàn)--簡短版
兼容ie和firefox的鼠標經過(onmouseover和onmouseout)實現(xiàn)--簡短版...2007-11-11
JavaScript實現(xiàn)相冊彈窗功能（zepto.js)
這篇文章主要介紹了JavaScript基于zepto.js實現(xiàn)相冊彈窗功能的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
JS具有阻塞特性，當瀏覽器在執(zhí)行js代碼時，不能同時做其它事情，所有瀏覽器在下載JS的時候，會阻止一切其他活動，比如其他資源的下載，內容的呈現(xiàn)等等。至到JS下載、解析、執(zhí)行完畢后才開始繼續(xù)并行下載其他資源并呈現(xiàn)內容。2017-02-02
如何在JavaScript中等分數(shù)組的實現(xiàn)
這篇文章主要介紹了如何在JavaScript中等分數(shù)組的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要介紹了 Bootstrap3 圖片 響應式圖片和圖片形狀的相關資料,需非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-01-01