深拷贝与浅拷贝的区别

1. js中的深拷贝（值拷贝）：

js 中的基本数据类型：String，Number，Boolean，Null，Undefined，在赋值的过程中都是值拷贝。
例如，let a = 10; b = a ，修改其中一个变量的值，不会影响到另一个变量的值。

2.js 中的浅拷贝（引用拷贝）：

js 中的对象数据类型：Object，Array，Function，Map，Set，在赋值过程中都是引用拷贝。

let obj = {	
	name:'静如秋叶',
	age: 3,
	height:100
}
let obj2 = obj
obj2.name = '小花';
console.log(obj) // {name:'小花',age: 3,height:100}
console.log(obj2) // {name:'小花',age: 3,height:100}

当修改obj2的name属性时，也会修改obj的name，因为他们指向同一块内存地址。

3. 将浅拷贝转换为深拷贝

在实际的项目开发中，我们在多数情况下不希望将对象进行浅拷贝，因为值会相互影响，容易出错。

3.1 Array的深拷贝

1. 通过slice方法

slice() 操作数组时，不会对原数组有影响，会产出一个新的数组。

let arr1 = [1,42,5,6]
let arr2 = arr1.slice()
arr2[0] = 100
console.log(arr1)  // [1,42,5,6]
console.log(arr2)  // [100,42,5,6] 

数组arr2的改变未引起arr1的变化。

2. 通过concat方法

数组的concat() 方法，能够连接两个数组，同样不会改变原来的数组。
用一个空数组[ ] 连接另一个数组，即可实现深拷贝。

let arr3 = ['cat','dog','pig']
let arr4 = [].concat(arr3)
arr3[2] = 'big pig'
console.log(arr3)   // ['cat','dog','big pig']
console.log(arr4)   // ['cat','dog','pig']

3. 通过ES6语法中的 …

ES6中的 … ，我们经常在数组的深拷贝中用到。

let arr5 = [0,0,1]
let arr6 = [...arr5]
arr5[0] = 10000
console.log(arr5) // [10000,0,1]
console.log(arr6) // [0,0,1]

4. 通过Array.from 方法

Array.from() 方法能从一个类似数组或可迭代对象中返回一个新的数组实例。通过Array.from() 方法能获取到一个数组的深拷贝。

let arr7 = [1,2,3]
let arr8 = Array.from(arr7)
arr7[1] = 1000
console.log(arr7) // [1,1000,3]
console.log(arr8) // [1,2,3]

3.2 Object 的深拷贝

1. 通过Object.assign() 方法

ES6的Object.assign(target,…sources) 用于对象的合并，将源对象的所有可枚举属性，复制到目标对象中，并返回合并后的目标对象。后来的源对象的属性值，将会覆盖它之前的对象的属性。

let person = {
	name: 'xia',
	age: 25,
	height: 160 
}
let otherPerson = Object.assign({},person)
person.age = 30
console.log(person) // {name: "xia", age: 30, height: 160}
console.log(otherPerson) // {name: "xia", age: 25, height: 160}

4. 万能转换器（对Array和Object）

前面讲了Array和Object的深拷贝方法，但是对于有更深层次的结构关系（数组套数组，数组套对象，对象套对象等），上面的方法就失灵了，可以看下面的例子。

let personArr = [{name: 'xia'}, {name: 'zhang'}]
let otherPersonArr2 = [...personArr]
personArr[0].name = 'xia xia'
console.log(personArr)
console.log(otherPersonArr2)

万能转换器JSON.parse(JSON.stringify(obj)) 深拷贝已对象，它可以深拷贝多层级的，不同担心嵌套问题。

• JSON.stringify() 将对象序列化成json对象
• JSON.parse() 反序列化——将json对象反序列化成js对象

JSON.stringify(obj) 将js中的对象转化为json字符串

let jack = {
	name: 'jack'
}
console.log(jack)
console.log(JSON.stringify(jack))

它们在格式上有区别。下图中的第一个是对象，name没有双引号括起来。第二个是json字符串，其中，name用双引号括起来了。

JSON.parse() 将json字符串解析成对象

let obj = {
     name: '静茹秋叶'
 }
 console.log('obj: ', obj)
 console.log('json string: ', JSON.stringify(obj))

 let str = JSON.stringify(obj)
 console.log('--------------')
 console.log(str)
 console.log('str to obj: ', JSON.parse(str))

欢迎各位点赞收藏！！！