浅拷贝与深拷贝

一、数据类型

了解深浅拷贝之前，首先需要了解一下不同的数据类型。
基础数据类型：string、number、null、undefined、boolean、symbol（ES6新增）
引用数据类型：函数、对象、数组
基本数据类型的特点：直接存储在栈(stack)中的数据。
引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里。

引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

二、深拷贝与浅拷贝

深拷贝和浅拷贝是针对对象和数组等这样的引用数据类型而言。

2.1 浅拷贝

1. 基本概念

浅拷贝是按位拷贝对象，其会创建一个新对象，这个对象是对原始对象属性值的一份精确拷贝。如果原对象的属性是基本类型，拷贝的就是基本类型的值，如果原对象的属性是引用类型，则拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

// 对象赋值
var obj1 = {
   'label' : 'test1',
   'value' : [1,[2,3]],
};
var obj2 = obj1;
obj2.label= "test2";
obj2.value[1] = ["二","三"];
console.log('obj1',obj1)	// {'name': 'test2','value' : [1,['二','三']]}
console.log('obj2',obj2)	// {'name': 'test2','value' : [1,['二','三']]}

如上所示，obj2只是拷贝的了obj1的内存地址，改变obj2的属性值会影响到obj1。

2. 浅拷贝的实现方式

方法一： Object.assign()
Object.assign()方法是ES6提供的对象的新增方法，用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象。

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象。
Object.assign()拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）。
如果源对象某个属性的值是对象（引用型数据类型），那么目标对象拷贝得到的是这个对象的引用。其他基础类型则相当于深拷贝，新对象与原对象基础数据类型互不影响。

let obj1 = {a: {b: 1},c: 2};
let obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj1.c = 3;
obj2.a.b // 2
obj2.c // 2

2. 对象的扩展运算符、解构赋值

let obj = { x: 1, y: 2, a:{b: 4} };
let {...z } = obj ;
obj.x = 10;
obj.a.b = 55
z // { x: 1, y: 2, a:{b: 55} }

其他方法还有：Array.prototype.concat()、Array.prototype.slice()等

2.2 深拷贝：

1. 基本概念

深拷贝是对于复杂数据类型在堆内存中开辟了一块新内存地址用于存放复制的对象，新创建的与原对象是相互独立的，两者有不同的地址，互不影响。

2. 常用的深拷贝方法

JSON.parse(JSON.stringify())

用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成新对象，新的对象会开辟新的栈，实现深拷贝。

let arr1 = {a:1,b:2,c:{d: ' test'}};
let arr2 = JSON.parse(JSON.stringify(arr1));
arr2.c.d= 'replace';
arr2  // {a:1,b:2,c:{d: ' replace'}}

注意，在JSON规范中只有null类型，没有undefined这个类型，深拷贝会忽略undefined类型属性，null类型则不会。所以转换过程可能会出现属性丢失问题。

递归方法

同样可以使用递归方法，逐位拷贝每一个属性。

let obj1 = {
	label: "testNm",
    value: {
        age: 18
    }
};
// 判断数据类型
function checkedType(target) {
	return Object.prototype.toString.call(target).slice(8, -1)
}
function deepClone(obj) {
    var tempObj = {};
    for(var key in obj){
       if(checkedType(obj[key]) ==='Object' || checkedType(obj[key]) ==='Array'){ 
          tempObj[key] = deepClone(obj[key]);
       }else{
           tempObj[key] = obj[key];
       }
    }
    return tempObj;
}
var obj2 = deepClone(obj1);
obj1.value.age = 19;
obj2; //{label: "testNm",value:{age:1}}