JavaScript 深拷贝和浅拷贝

1. 浅拷贝

浅拷贝只拷贝了最外简单数据类型的一层，更深层次对象级别的只拷贝了地址。地址指向同一个内存空间。若改变拷贝后对象深层对象的值，由于地址一直，拷贝前对象深层对象的值也会随之改变。
下面是一个浅拷贝的例子：

var oldObj = {
    
    
    id: 1,
    name: 'Jack',
    msg: {
    
    
        age: 18
    }
};
var newObj = {
    
    };
// 遍历旧对象，依次拷贝
for (var k in oldObj) {
    
    
    newObj[k] = oldObj[k];
}

将拷贝后的对象输出：

console.log(newObj);

可以看到，已经拷贝完成。
但是改变一下新对象中深层对象的值，再输出旧对象，发现旧对象深层对象的值也随之改变了：

newObj.msg.age = 20;
console.log(oldObj);

---

另外，ES6语法中提供了浅拷贝的方法 Object.assign(target, sources)，其中：
target：拷贝后的对象
sources：拷贝前的对象
例如，在本例中：

Object.assign(newObj, oldObj);
console.log(newObj);

同样，也可以完成浅拷贝。

2. 深拷贝

深拷贝拷贝多层, 每一级别的数据都会拷贝，更深层次对象级别的会开辟新的内存空间进行拷贝。新旧对象深层次对象级别的数据地址不同，所以两者独立，改变新对象的值，旧对象不受影响。
下面是个例子：

var oldObj = {
    
    
    id: 1,
    name: 'Jack',
    msg: {
    
    
        age: 18
    },
    color: ['pink', 'red']
};
var newObj = {
    
    };
// 封装函数 
function deepCopy(newobj, oldobj) {
    
    
    for (var k in oldobj) {
    
    
        // 判断我们的属性值属于那种数据类型
        // 1. 获取属性值  oldobj[k]
        var item = oldobj[k];
        // 2. 判断这个值是否是数组
        if (item instanceof Array) {
    
    
            newobj[k] = [];
            // newobj[k]是属性，item是值
            deepCopy(newobj[k], item)
        } else if (item instanceof Object) {
    
    
            // 3. 判断这个值是否是对象
            newobj[k] = {
    
    };
            deepCopy(newobj[k], item)
        } else {
    
    
            // 4. 属于简单数据类型
            newobj[k] = item;
        }

    }
}
deepCopy(newObj, oldObj);
console.log(newObj);

得到新的对象：

若改变新对象中age的值，旧对象中age的值不会改变，不会受到影响：

newObj.msg.age = 20;
console.log(newObj);
console.log(oldObj);

3. 小结

1. 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝地址。
2. 深拷贝拷贝多层，每一级别的数据都会拷贝。

以上为个人学习所得理解，若有不妥之处，欢迎评论指正。