JS實(shí)現(xiàn)深拷貝的幾種簡(jiǎn)單方法示例
更新時(shí)間：2023年10月07日 15:20:51 作者：溫其如玉_zxh
深拷貝和淺拷貝是在JavaScript中復(fù)制對(duì)象或數(shù)組時(shí)經(jīng)常遇到的概念,下面這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)深拷貝的幾種簡(jiǎn)單方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
一、使用 JSON 轉(zhuǎn)換
這是最簡(jiǎn)單的方法。
JSON.parse(JSON.stringify(obj))
二、使用遞歸
通過(guò)遞歸的方式深度遍歷對(duì)象，將每個(gè)屬性的值進(jìn)行復(fù)制。需要處理被復(fù)制對(duì)象為值類型的情況以及屬性值中包含對(duì)象的情況。需要注意的是，為了防止循環(huán)引用導(dǎo)致死循環(huán)，需要記錄已經(jīng)遍歷過(guò)的對(duì)象。
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 是一個(gè)一致性、模塊化、高性能的 JavaScript 實(shí)用工具庫(kù)。
npm i --save lodash
import {cloneDeep} from 'lodash';const obj1 = {a: {b: 2}};
const obj2 = cloneDeep(obj1);總結(jié)
到此這篇關(guān)于JS實(shí)現(xiàn)深拷貝的幾種簡(jiǎn)單方法的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)深拷貝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js獲取瀏覽器高度和寬度值,盡量的考慮了多瀏覽器。2009-09-09
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)li標(biāo)簽的刪除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-04-04
JS實(shí)現(xiàn)統(tǒng)計(jì)復(fù)選框選中個(gè)數(shù)并提示確定與取消的方法
這篇文章主要介紹了JS實(shí)現(xiàn)統(tǒng)計(jì)復(fù)選框選中個(gè)數(shù)并提示確定與取消的方法,可實(shí)現(xiàn)javascript針對(duì)頁(yè)面復(fù)選框元素的統(tǒng)計(jì)與提示功能,需要的朋友可以參考下2015-07-07
JS實(shí)現(xiàn)iframe編輯器光標(biāo)位置插入內(nèi)容的方法(兼容IE和Firefox)
這篇文章主要介紹了JS實(shí)現(xiàn)iframe編輯器光標(biāo)位置插入內(nèi)容的方法,可實(shí)現(xiàn)文本與圖片的插入功能,并兼容IE和Firefox瀏覽器,需要的朋友可以參考下2016-06-06
el-upload實(shí)現(xiàn)上傳文件并展示進(jìn)度條功能
這篇文章主要介紹了el-upload實(shí)現(xiàn)上傳文件并展示進(jìn)度條，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
類型收窄是TypeScript類型系統(tǒng)中最為核心和強(qiáng)大的特性之一,本文主要介紹了TypeScript?類型收窄的具體使用,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2026-03-03
js中async函數(shù)結(jié)合promise的小案例淺析
這篇文章主要介紹了js中async函數(shù)結(jié)合promise的小案例淺析，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
選擇并轉(zhuǎn)移導(dǎo)航菜單的方法有很多，本例使用js來(lái)實(shí)現(xiàn)選擇并轉(zhuǎn)移導(dǎo)航菜單,需要的朋友可以參考下2014-08-08
contains和compareDocumentPosition 方法來(lái)確定是否HTML節(jié)點(diǎn)間的關(guān)系
一個(gè)很棒的 blog 文章，是 PPK 兩年前寫的，文章中解釋了 contains() 和 compareDocumentPosition() 方法運(yùn)行在他們各自的瀏覽器上。2011-09-09
這篇文章主要為大家詳細(xì)解析了Sortable.js拖拽排序使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11