首先我们来说下区别:
浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用
深拷贝拷贝多层, 每一级别的数据都会拷贝
那么我们来用代码分别实现浅拷贝与深拷贝
浅拷贝
例1:
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
for (var k in obj) {
// k 是属性名 obj[k] 属性值
o[k] = obj[k];
}
console.log(o)
这是ES6之前的写法,Object.assign(target, ...sources) es6 新增方法可以浅拷贝
例2:
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
Object.assign(o, obj); // 一行代码完美解决
// 注: 这里第一个参数是所需要接收拷贝的对象,后面的参数是被拷贝的对象
深拷贝
例1:用递归实现深拷贝
let obj = {
name:'张三',
age:22,
arr:['1',2],
arrObj:{
name:'李四',
sex:'女'
}
}
let objs = {}; // 创建一个对象用于接收
// 封装函数 第一个参数:拷贝方 第二个参数被拷贝方
function deepCopy(obj1,obj2){
for (let v in obj2) {
// 我们需要判断属性值属于哪种数据类型
let item = obj2[v]; // 获取属性值
if(item instanceof Array){ // 判断这个值是否是数组
obj1[v] = []; // 拷贝方新建空数组
deepCopy(obj1[v],item)
}
else if(item instanceof Object){ // 判断这个值是否是对象
obj1[v] = {}; // 拷贝方新建空对象
deepCopy(obj1[v],item);
}
else{
// 属于简单数据类型
obj1[v] = item;
}
}
}
deepCopy(objs,obj) //调用
console.log(objs)
例2:JSON.parse(JSON.stringify()) 这种方式我觉得算是最简单的
let obj1 = {
name:'张三',
age:22,
arr:['1',2],
arrObj:{
name:'李四',
sex:'女'
}
}
let obj2 = {}; // 创建一个对象用于接收
function deepCopy(obj){
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}
obj2 = deepCopy(obj1)
console.log(obj2)
需要注意的是:这种拷贝方法不可以拷贝一些特殊的属性(例如正则表达式,undefine,function)
工作中看自己实际需求,我这里写的也可能某些地方有缺陷,欢迎大佬指教
网友评论