JavaScript学习篇-4、浅谈JavaScript中的浅拷贝和深拷贝

一、浅拷贝

1、浅拷贝：浅拷贝只是拷贝一层数据，如果有更深层次对象级别的，只拷贝其引用地址

实例

var obj = {
    name: 'zs',
    age: 20
};
var o = {};
//遍历实现浅拷贝
for (var k in obj) {
    o[k] = obj[k]
}
console.log(o); //输出：{ name: 'zs', age: 20 }

当我们obj对象中添加一个对象，然后进行浅拷贝，在对象o修改msg.hobby的值,会发现对象obj也跟着改变了

var obj = {
    name: 'zs',
    age: 20,
    msg: {
        hobby: 'sing'
    }
};
var o = {};
//遍历实现浅拷贝
for (var k in obj) {
    o[k] = obj[k]
}
console.log(o); //{ name: 'zs', age: 20, msg: { hobby: 'sing' } }
//在对象o修改hobby的值
o.msg.hobby = 'dance';
console.log(obj);//{ name: 'zs', age: 20, msg: { hobby: 'dance' } }
console.log(o); //{ name: 'zs', age: 20, msg: { hobby: 'dance' } }

2、浅拷贝方法

（1）循环

for (var k in obj) {
    o[k] = obj[k]
}

（2）ES6新增语法糖Object.assign

Object.assign(o, obj)

二、深拷贝

1、深拷贝：深拷贝拷贝多层，每一层数据都会拷贝

2、深拷贝方法

（1）使用js递归

var obj = {
    name: 'zs',
    age: 20,
    msg: {
        hobby: 'sing'
    },
    color: ['red', 'green']
};
var o = {};
// 深拷贝
// 封装函数
function deepCopy(newObj, oldObj) {
    for (var k in oldObj) {
        // 判断属性值属于哪种数据类型
        //1、获取属性值
        var item = oldObj[k];
        // 2、判断这个值是否是数组
        if (item instanceof Array) {
            newObj[k] = [];
            deepCopy(newObj[k], item);
        }
        // 3、判断这个值是否是对象
        else if (item instanceof Object) {
            newObj[k] = {};
            deepCopy(newObj[k], item);
        }
        // 4、简单数据类型
        else {
            newObj[k] = item;
        }
    }
}
deepCopy(o, obj);
console.log(o);

（2）利用JSON.stringify(obj)将对象先转为json字符串，再JSON.parse(）转回为json对象可以实现深拷贝

var b = JSON.parse(JSON.stringify(obj));
console.log(b);