本文会讲到几种深拷贝的方法,
1.递归拷贝
这种方式 适用于多层数据嵌套
export function deepClone(obj){ //可传入对象 或 数组
// 判断是否为 null 或 undefined 直接返回该值即可,
if(obj === null || !obj)return obj;
// 判断 是要深拷贝 对象 还是 数组
if(Object.prototype.toString.call(obj)==="[object Object]"){ //对象字符串化的值会为 "[object Object]"
let target = {}; //生成新的一个对象
const keys = Object.keys(obj); //取出对象所有的key属性 返回数组 keys = [ ]
//遍历复制值, 可用 for 循环代替性能较好
keys.forEach(key=>{
if(obj[key]&&typeof obj[key] === "object")
//如果遇到的值又是 引用类型的 [ ] {} ,得继续深拷贝
target[key] = deepClone(obj[key]);//递归
else
target[key] = obj[key];
})
return target //返回新的对象
}else if(Array.isArray(obj)){
// 数组同理
let arr = [];
obj.forEach((item,index)=>{
if(item&&typeof item === "object")
arr[index] = deepClone(item);
else
arr[index] = item;
})
return arr
}
}
用法
const obj = {};
const obj2 = deepClone(obj);
总结:
该方法比较好,对于一些复杂嵌套的数据类型可以完全深拷贝
.
2. JSON.stringify()
const source = { name:'小明' ,sayName:()=>{} ,prop:undefined};
const newObj = JSON.stringify( source )
//先字符串序列化 再 parse解析回来
console.log(JSON.parse( newObj ))
VM575:1 {"name":"小明"}// 输出结果
总结:
该方法简单,但是会吧引用类型和undefined的属性去除,相比第一种比较方便,但是比完全
.
3. ES6 扩展运算 ...
//同样代码
const source = { name:'小明' ,sayName:()=>{} ,prop:undefined, obj:{}};
const newObj = { ...source }
//先字符串序列化 再 parse解析回来
console.log( newObj )
VM575:1 {name: "小明", prop: undefined, sayName: ()=>{}, obj:{ } }// 输出结果
// 对二层结构的obj 赋值
source.obj.name = 'rick';
你会发现
console.log( newObj.obj.name ) // newObj.obj.name => rick
总结:
该方法简洁,比第二种方法好,但是,只是将 source 里面的值依次添加到 newObj,
当你把source.obj.name = 'rick'; newObj.obj.name 也等于 'rick'
多层结构请不要用这个!!!!
