浅拷贝与深拷贝

浅拷贝

浅拷贝是指一个新对象对原始对象的属性值进行精确地拷贝。如果拷贝的是基本数据类型，拷贝的就是基本数据类型的值，如果拷贝的是引用数据类型，拷贝的就是内存地址。如果其中一个对象的引用内存发生了改变，另一个对象也会发生改变。

(1) 使用ES6的Object.assign()方法
Object.assign()接收多个参数，第一个参数是目标对象，其余参数是源对象。
注意：

• 如果目标对象和源对象有同名属性，或者多个源对象具有同名属性，后面的属性会覆盖前面的属性；
• 如果该函数只有一个参数时，当参数为一个对象，则返回该对象；当参数不是对象时，会将参数转换为对象再返回；
• 因为null和undefined不能转化为对象，所有第一个参数不能为null或undefined，会报错。

let obj1 = { a:11 }
let obj2 = { a:21, b:22 }
let obj3 = { b:32, c:33 }

// Object.assign()的一个参数为目标对象，其余参数为源对象。
// 1.目标对象和源对象，或源对象和源对象有同名属性，后面的属性会覆盖前面的属性
let newObj1 = Object.assign(obj1, obj2, obj3)
console.log(newObj1); // { a: 21, b: 32, c: 33 }

// 浅拷贝引用类型数据时，拷贝前后对象共享一块内存，所以其中一个对象发生了改变，另一个对象也会跟着改变
obj1.a = 112
console.log(newObj1); // { a: 112, b: 32, c: 33 }

// 2.Object.assign()只有一个参数时，如果这个参数是对象，就返回该对象，如果这个参数是不是对象类型，就会转换为对象返回。
console.log(Object.assign(obj2)); // { a: 21, b: 22 }
console.log(Object.assign(String)); // [Function: String]

(2) 使用ES9的对象扩展运算符

let obj1 = { a:11, c: {d:4}}
let obj2 = { a:21, b: 22 }
let newObj = { ...obj1, ...obj2 }
console.log(newObj); // { a: 21, c: { d: 4 }, b: 22 }
obj1.c.d = 14
console.log(newObj); // { a: 21, c: { d: 14 }, b: 22 }

(3) 使用lodash函数库的clone()方法

var _ = require('lodash')
let oldObj = { a: 11, b: { d: 44 }, c: [ 33, 55 ] }
let newObj = _.clone(oldObj)
console.log(newObj); // { a: 11, b: { d: 44 }, c: [ 33, 55 ] }
console.log(oldObj.b === newObj.b); // ture

深拷贝

从堆内存中重新开辟一个新的区域来存放新对象，对对象中的子对象进行递归拷贝，拷贝前后的两个对象互不影响。

(1) 使用JSON.parse(JSON.stringify())

• 原理是利用JSON.parse()将js对象序列化成JSON字符串，然后再利用JSON.stringify()反序列化，还原js对象。
• 但是存在问题: 如果拷贝对象中有函数，undefined，symbol，拷贝之后都会消失，而正则变成空对象

let obj1 = { a:1 , b: { c:3}}
let newObj1 = JSON.parse(JSON.stringify(obj1))
console.log(newObj1); // { a: 1, b: { c: 3 } }
console.log(obj1 === newObj1); // false

// 对象中包含undefined, symbol, function, 拷贝后消失了，正则会成空对象
let obj2 = { a: 2, d: undefined, c: Symbol(1), e: function() {}, f: /^[0-9]*$/}
let newObj2 = JSON.parse(JSON.stringify(obj2))
console.log(newObj2); // { a: 2, f: {} }

(2) 使用laodash函数库的deepclone

var _ = require('lodash')
let obj = { a: 1, b: undefined, c: Symbol(3), d: function() {}, e: /^[0-9]*$/}
let newObj = _.cloneDeep(obj)
console.log(newObj); // { a: 1, b: undefined, c: Symbol(3), d: [Function: d], e: /^[0-9]*$/ }