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