【面试常考】JS的深拷贝和浅拷贝

1.拷贝的理解
拷贝，即copy，拷贝数据的意思。
2.拷贝数据的方式：
（1）直接赋值给一个变量
（2）Object.assign()
（3）Array.prototype.slice()
（4）Array.prototype.concat()
（5）JSON.parse(JSON.stringify())
…
3.拷贝数据应用
（1）基本数据类型
拷贝后会生成一份新的数据，修改拷贝后的数据不会影响原来的数据。这种拷贝方式也称为深拷贝。

let name1 = 'zyy'
let name2 = name1
name2 = 'qjw'
console.log(name1) // 'zyy'

let bool1 = true
let bool2 = bool1 
bool2 = false
console.log(bool1 ) // true

JSON.parse(JSON.stringify())是一种深拷贝方式。但需要注意拷贝的数据里面不能有函数，因为JSON.stringify()，JSON.parse()处理不了函数。

let obj = {name:'zyy',age:24}
let obj1 = JSON.parse(JSON.stringify(obj)) //JSON.stringify(obj)是一个字符串，相当于基本数据类型的拷贝
obj1.name = 'jqw'
console.log(obj) // {name:'zyy',age:24}

（2）引用数据类型（对象、数组）
拷贝的只是引用，修改拷贝后的数据会影响原来的数据，使得数据不安全。这种拷贝方式也称为浅拷贝。

对对象、数组这种引用类型数值的拷贝是浅拷贝。

let obj = {
	name: 'zyy',
	age:24
}
let obj1 = obj
obj1.age = 18
console.log(obj) // {name:'zyy',age:18}

let arr = [1,2,5]
let arr1 = arr
arr1[3] = 0
console.log(arr) // [1,2,5,0]

let arr = [1,2,{name:'zyy'}]
let arr1 = arr

arr1[0] = 0
console.log(arr) // [1,2,{name:'zyy'}]

arr1[2].name = 'qjw'
console.log(arr) //[1,2,{name:'qjw'}]

Object.assign()是浅拷贝方式。

let obj = {name:'qjw'}
let obj1 = Object.assign(obj)
obj1.age = 24
console.log(obj) // {name:'jqw',age:24}

Array.prototype.concat()是浅拷贝方式。

let arr =  [1,2,4]
let arr1 = arr.concat()
arr[2] = 3
console.log(arr) // [1,2,3]

Array.prototype.slice()是浅拷贝方式。

let arr =  [1,2,4]
let arr1 = arr.slice()
arr[2] = 3
console.log(arr) // [1,2,3]

4.深拷贝与浅拷贝
（1）深拷贝（深度克隆）
特点：拷贝的时候会生成一份新的数据，修改拷贝以后的数据不会原数据。
（2）浅拷贝（对象，数组）
特点：拷贝的时候只是拷贝了一份引用，修改拷贝以后的数据会影响原来的数据。
5.如何实现深拷贝（深度克隆）？【重点！重点！重点！】

//实现深度拷贝
function deepCopy(obj) {
	if (obj instanceof Object) { //当拷贝的是对象时
		let tmp =  {}
		for(let key in obj) {
			tmp[i] = deepCopy(key)
		}
		return tmp
	} else if (obj instanceof Array) { //当拷贝的是数组时
		let tmp = []
		for (let i = 0;i < obj.length;i++) {
 			tmp.push(deepCopy(obj[i]))
 		}
 		return tmp
	} else if (obj instanceof Function) { //当拷贝的是函数时
		return new Function('return '+ obj.toString())
	} else {
		return obj   //当拷贝的是基本数据类型时
	}
}

喜欢的话，点个赞鸭，ღ( ´･ᴗ･` )比心