JavaScript 浅谈浅拷贝和深拷贝

深拷贝和浅拷贝在各大语言中都有体现，这篇博客谈谈我对JavaScript中深浅拷贝的理解。

浅拷贝

浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用地址。

这句话怎么理解呢？来看下面这个例子： 

let obj = {
  id: 1,
  name: '李小龙',
  message: {
    age: 18
  }
}

let o = {}

我现在想要对象o拷贝对象obj，浅拷贝的原理就是通过for循环，为o对象添加属性和属性值：

// for in 实现浅拷贝
for (k in obj) {
  o[k] = obj[k]
}
console.log(o)

这样一来我们就可以看到，o对象已经成功实现了拷贝。

但是，我们说了，浅拷贝只是拷贝一层，更深层次的只拷贝引用地址。什么叫做拷贝引用地址？此时我们对o对象的深层次属性进行修改，你就知道什么叫做只拷贝引用地址了：

o.name = '周杰伦'
  //通过对象o修改深层属性值
o.message.age = 20

console.log(o.name) //周杰伦
console.log(obj.name) //李小龙
console.log(o.message.age) //20
console.log(obj.message.age) //20

惊奇地发现，修改了o的深层属性age，居然把obj的age也给改了。

这就是我们说的：浅拷贝只是拷贝一层，更深层次的只是拷贝引用地址，因此通过其中任何一个对象修改深层属性的属性值时，每个对象的属性值都会被改变（注意，修改第一层的属性值是互不影响的）

ES6中的浅拷贝

在ES6中，我们还可以通过另一种更加推荐的方式来实现浅拷贝：

let obj = {
  id: 1,
  name: '李琳琦',
  message: {
    age: 18
  }
}
let o = {}
// Object.assign 实现浅拷贝
Object.assign(o, obj)

• Object.assign接受两个参数，一个是拷贝的对象，一个是被拷贝的对象

• Object.assign的实现结果和for...in...的实现结果是一模一样的

深拷贝

• 深拷贝拷贝多层，每一级别的数据都会拷贝

• 实现的思路是封装一个深拷贝的函数，通过if判断类型，递归调用函数

• 分别判断数组、对象、普通数据类型，注意数组的判断要放在对象的判断之前，因为数组也是对象

• 修改深层属性的属性值，原对象不会受影响

代码实现：

// 深拷贝拷贝多层, 每一级别的数据都会拷贝.
var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    },
    color: ['pink', 'red']
};
var o = {};
// 封装函数 
function deepCopy(newobj, oldobj) {
    for (var k in oldobj) {
        // 判断我们的属性值属于哪种数据类型
        // 1. 获取属性值  oldobj[k]
        var item = oldobj[k];
        // 2. 判断这个值是否是数组
        if (item instanceof Array) {
            newobj[k] = [];
            deepCopy(newobj[k], item)
        } else if (item instanceof Object) {
            // 3. 判断这个值是否是对象
            newobj[k] = {};
            deepCopy(newobj[k], item)
        } else {
            // 4. 属于简单数据类型
            newobj[k] = item;
        }

    }
}
deepCopy(o, obj);
console.log(o);

o.msg.age = 20;
console.log(obj);

深拷贝就不会出现浅拷贝的那个问题了。