JavaScript中浅拷贝和深拷贝到底是什么？

---

前言

在JavaScript中，浅拷贝和深拷贝是经常出现的概念，工作中经常会遇到，那么到底什么是浅拷贝和深拷贝呢，他们又有什么样的关系呢？如何实现它们呢？这些对于前端工程师而言必须要弄明白。

---

JavaScript中的数据类型

在我们深入理解浅拷贝与深拷贝之前，我们需要先了解JavaScript中的数据类型的特点

• 简单数据类型：直接存储在栈(stack)中的数据，例如String，Number类型等

• 引用数据类型：存储的是该对象在栈中引用，真实的数据存放在堆内存里，例如对象Object

而我们要讨论的浅拷贝与深拷贝是基于引用数据类型的；

赋值与拷贝的区别

这里我们要明确一个概念，项目中我们经常使用的=赋值，与拷贝是有区别的

• 对于简单数据类型，赋值就是直接新建一个栈中的内存
• 而对于引用数据类型，赋值其实是赋的该引用类型的内存地址
• 而赋值与拷贝又有所不同，拷贝它会创建一个新的对象，这个对象是拷贝自原始的对象属性，并不是单纯的拷贝内存地址

下面的代码可以验证：

var obj = {
   a: 1,
   b: {
       name: 2
   }
}

var obj1 = obj // 直接赋值
obj1.a = 2
console.log(obj, obj1) // 此时obj 和obj1中的a值都是2

这里我们先不讨论是浅拷贝还是深拷贝，只要知道 Object.assign的作用是拷贝就行

// 拷贝
var obj = {
   a: 1,
   b: {
       name: 2
   }
}

var obj1 = Object.assign({}, obj) // 直接赋值
obj1.a = 2
console.log(obj, obj1) // 此时obj中的a为1，obj1中的a值为2

浅拷贝与深拷贝

浅拷贝： 拷贝的只是引用类型的原始对象的属性值，如果该原始对象的属性仍然是引用类型，那么只会拷贝内存地址，因此如果拷贝的对象的引用类型属性值发生改变，是会影响另一个对象的；

深拷贝： 深拷贝相比浅拷贝，即使原始对象的属性是引用类型，那么也会重新创建一个新的内存空间来拷贝原始属性值，即修改拷贝对象的引用类型属性值也不会影响到另外一个对象的；

实现浅拷贝的方式

• Object.assign()

var obj = {
 	a: {
    	name: 1,
	},
    b: 1
};
var obj1 = Object.assign({}, obj);
obj1 .a.name = 2;
obj1 .b = 2
console.log(obj1, obj); // 

• Array.prototype.concat()

let arr = [{
	name: 1
}];
let arr2 = arr.concat();
arr2[0].name = 2;
console.log(arr[0].name); // 2

• Array.prototype.slice()

这里可以回忆一下slice和splice最大的区别是，slice不会修改原数组，而splice会修改原数组

var obj = [
	  {
	     name: 1
	  }
]
var obj1 = obj.slice()
obj1[0].name = 2
console.log(obj[0].name) // 2

实现深拷贝的方式

• JSON.parse(JSON.stringify())

var obj = [
    {
        name: 1,
    }
]
var obj1 = JSON.parse(JSON.stringify(obj))
obj1[0].name = 2
console.log(obj[0].name) // 1

但是JSON方法有它的缺点，如果包含时间对象，正则表达式，Error对象，函数，undefined，NaN，infinity等属性的时候，会丢失或者变成null；

• 递归
  当JSON方法不能满足我们深拷贝的需求时，我们应该手写一个递归函数

function deepCopy(src) {
    if (typeof src !== 'object' || src === null) {
        return src
    }
    let dist = Array.isArray(src) ? [] : {}
    // 遍历引用类型
    for (let key in src) {
        let item = src[key]
        // 找到可迭代属性
        if (src.hasOwnProperty(key)) {
            if (item && typeof item === 'object') {
                // 还是引用类型则继续递归
                dist[key] = deepCopy(item)
            } else {
                // 简单数据类型直接复制
                dist[key] = item
            }
        }
    }
    return dist
}

var obj = {
    a: {
        name: 1
    }
}
var obj1 = deepCopy(obj)
obj1.a.name = 2
console.log(obj1.a.name, obj.a.name) // 2 1

• lodash的cloneDeep方法

var _ = require('lodash');
var obj = {
   a: {
		name: 1
	},
   b: 1
};
var obj1 = _.cloneDeep(obj1);
obj1.a.name = 2
console.log(obj.a.name); // 1

---

总结

• 明确赋值与拷贝的关系，拷贝会创建一个新的对象
• 明确浅拷贝与深拷贝的关系，引用类型的属性值被修改是否会影响原对象
• 了解浅拷贝的实现方式，同时了解数组的几个不会修改原数组的浅拷贝的方法
• 实现深拷贝的递归函数