深拷贝:在堆内存中开辟一个存储空间来存储一个一模一样的克隆对象。
浅拷贝:相反不在堆内存中重新开辟空间,仅仅复制栈内存中的引用地址,本质上依然指向的同一块存储空间。
一、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
这种方式为项目中最安全且最常用的深拷贝方法俗称万能拷贝,适合于各种数据结构。
此外还有其他组件库的方法比如
1.JQuery的extend()
2.第三方库lodash的cloneDeep()