JavaScript实现深浅拷贝
1. 浅拷贝
生成一个新的指针,但依旧指向原来的地址,简单的来说,B复制A,A发生改变了,B也跟着发生改变
实现浅拷贝的方式
- 自定义函数
function shallowCopy(obj){
let newObj = {};
for(let item in obj){
if(obj.hasOwnPrototype(item)){
newObj[item] = obj[item];
}
}
return newObj;
}
- ES6扩展运算符
function shallowCopy(obj){
return {...obj};
}
- ES6 Object.assign() 这种方法需要注意的地方是,当被复制的对象是一层的时候属于深拷贝,两层或者多层的时候是浅拷贝
let obj = {a:1,b:[1,2]};
let newObj = Object.assign({},obj);
obj.b[0] = 100;
console.log(newObj.b[0]); //100
- 数组方法,只适合于类数组对象 Array.from()
let arr = ['a',['b','c'],'d'];
let newArr = Array.from(arr);
arr[1][0] = 'e';
console.log(newArr[1][0]); //e
2. 深拷贝
生成一个新的指针和一块新的内存,新的指针会指向这块新的内存,即B复制A,A发生改变,而B不变
深拷贝的局限:会忽略undefined、不能序列化函数、不能解决循环引用的对象
实现深拷贝的方式
- 自定义函数
function deepCopy(obj){
let newObj = obj instanceOf Array ? [] : {};
for(let item in obj){
if(obj.hasOwnProperty(item)){
newObj[item] = typeOf obj[item] === 'object' ? deepCopy(obj[item]) : obj[item];
}
}
return newObj;
}
- JSON.parse(JSON.stringify())
用JSON.stringify()把对象转化为字符串,再用JSON.parse把字符串转化为新的对象,只有可以转化为JSON格式的对象才可以使用这种方式,如果对象中包含Function就不可以使用这种方式了。
let obj = {a:1,b:[1,2]};
let newObj = JSON.parse(JSON.stringify(obj));
obj.b[0] = 100;
console.log(newObj.b[0]); //1
- ES6 Object.assign()
let obj = {a:1};
let newObj = Object.assign({},obj);
obj.a = 100;
console.log(newObj.a); //1