实现深拷贝的几种方式
深拷贝:在堆内存中开辟一个存储空间来存储一个一模一样的克隆对象。
浅拷贝:相反不在堆内存中重新开辟空间,仅仅复制栈内存中的引用地址,本质上依然指向的同一块存储空间。
在我们的项目日常开发中,经常使用到深拷贝和浅拷贝,今天就跟大家分享几种深拷贝的实现方式:
一、JSON.stringify();(深拷贝普通对象时推荐使用)
let obj = { name: '张三', age: 18 } // 先转为json格式字符串,再转回来 let newObj = JSON.parse(JSON.stringify(obj)); obj.age = 20; console.log(newObj.age); // 输出18
当对象属性类型为string、number、boolean时,推荐使用该方式。但是属性类型为undefined、null、Date、RegExp、function时,使用该方式进行深拷贝会出问题。
二、递归方式(推荐使用)
// 函数拷贝 const copyObj = (obj = {}) => { let newObj = null // 判断是否需要继续进行递归 if(typeof obj == 'object' && obj !== null){ newObj = obj instanceof Array?[]:{} // 进行下一层递归克隆 for(let i in obj){ newObj[i] = copyObj(obj[i]) } }else{ newObj = obj } return newObj } let obj = { numberParams: 1, funcParams:() => { console.log('I am a function!') }, objParams: { prop1: 1, prop2: 2 } } const newObj = copyObj(obj) obj.numberParams = 100 // 更改原对象的属性 console.log(newObj.numberParams) // 输出1
这种方式为项目中最安全且最常用的深拷贝方法。
三、第三方库lodash的cloneDeep()方法
这种方式是否使用,取决于我们项目中是否已使用过lodash其它功能,没必要为了一个深拷贝功能而引入一整个库。
import lodash from 'lodash' let obj = { person: { name: '张三', age: 18, hobbies: ['跑步','乒乓球','爬山'] }, p: 1 } const newObj = lodash.cloneDeep(obj) obj.p = 20 console.log(newObj.p) // 输出1
四、JQuery的extend()方法(推荐在JQ中使用)
如果项目中使用了JQ,那么可以使用JQ的extend()实现深拷贝。
let obj = { person: { name: '张三', age: 18, hobbies: ['跑步','乒乓球','爬山'] }, p: 1 } const newObj = $.extend(true,{},obj) obj.p = 20 console.log(newObj.p) // 输出1
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)