Js对象的拷贝

在 js 中，对象的拷贝分为浅拷贝和深拷贝。对浅拷贝的理解，可理解为拷贝得不彻底，如子对象拷贝了父对象的指向地址等，这时，如果父对象的值发生改变，子对象也随之发生改变。如果是深拷贝，则是“完完全全”地拷贝，相当于重新复制了一份，就算父对象的值发生改变，子对象也不会发生改变。

 

1.浅拷贝

let a = {one: '1', two: '2', three: ['3','4']}; //父对象
function clone(obj) {
    var target = {};
    for(let i in obj) {
        target[i] = obj[i];
    }
    return target;
}
let result = clone(a); //子对象
a.three.push('5'); //修改父对象
console.log(result.three); //["3", "4", "5"] 子对象的值也随之改变

 

2.深拷贝

    深拷贝的做法无非是在将父对象的“每一层”进行浅拷贝，理解起来就是，既然浅拷贝只复制到了父对象的“表层”，那么深拷贝就递归遍历父对象的每一层进行浅拷贝，即实现完完全全的拷贝。

 

let a = {one: '1', two: '2', three: ['3','4']}; //父对象
function deepClone(obj, target) {
    for(let i in obj) {
        if(typeof(obj[i]) === 'object') {
            target[i] = (obj[i].constructor === Array)? [] : {};
            deepClone(obj[i],target[i]);  //递归遍历父对象进行浅复制
        }
        else target[i] = obj[i];
    }
}
let result = {};
deepClone(a,result); 
a.three.push('5'); //修改父对象
console.log(result.three); //["3", "4"] 子对象的值不随之改变

 

Object . assign

    在es6中，关于对象的复制，则提出了Object.assign()方法，该方法只能实现浅复制！

let a = {one: '1', two: '2', three: ['3','4']}; //父对象
let result = {};
Object.assign(result, a); 
a.three.push('5'); //修改父对象
console.log(result.three); //["3", "4","5"] 子对象的值也随之改变

 

JSON.parse(JSON.stringify())

    对于深复制，也可用JSON.parse(JSON.stringify())进行操作

let a = {one: '1', two: '2', three: ['3','4']}; //父对象
let result  = JSON.parse(JSON.stringify(a));
a.three.push('5'); //修改父对象
console.log(result.three); //["3", "4"] 子对象的值不随之改变

 

但是使用 JSON.parse(JSON.stringify()) 有诸多限制！但却又是性能最高。

最近新建了一个微信公众号，把关于 js 的知识点总结都写在了里面，欢迎关注，一起学习分享！

  Web前端小碎片积累