js常用方法(1) js深拷贝

什么是js深拷贝？

当每个对象的值都指向同一个堆内存，这样的话不便于我们做操作，所以诞生了js深拷贝
深拷贝作用在引用类型上，例如：Object，Array

深拷贝不会拷贝引用类型的引用，而是将引用类型的值全部拷贝一份，形成一个新的引用类型，这样就不会发生引用错乱的问题，使得我们可以多次使用同样的数据，而不用担心数据之间会起冲突

js实现深拷贝的方式有哪些？

Object 对象

第一种 最简单且容易理解的，利用ES6扩展运算符

 var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var { ...obj2 } = obj
obj2.a = 5;
console.log(obj1.a);  // 1
console.log(obj2.a); // 5

第二种 转换成json再转换成对象实现对象的深拷贝

var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var obj2 = JSON.parse(JSON.stringify(obj))
obj2.a = 5;
console.log(obj1.a);  // 1
console.log(obj2.a); // 5

第三种 for 循环实现数组的深拷贝

function copyObj(obj) {
	let res = {}
	for (var key in obj) {
		res[key] = obj[key]
	}
	return res
}
var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var obj2 = copyObj(obj1)
obj2.a = 5;
console.log(obj1.a);  // 1
console.log(obj2.a); // 5

Array 数组

第一种 最简单且容易理解的，利用ES6扩展运算符

var arr1 = [1,2,3]
var [ ...arr2 ] = arr1
arr2[0] = 5
console.log(arr1[0]); // 1
console.log(arr2[0]); // 5

第二种 for 循环实现数组的深拷贝

function copyArr(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
     res.push(arr[i])
    }
    return res
}
var arr1 = [1,2,3]
var arr2 = copyArr(arr1) 
arr2[0] = 5
console.log(arr1[0]); // 1
console.log(arr2[0]); // 5

第三种 slice 方法实现数组的深拷贝

var arr1 = [1,2,3]
var arr2 = arr.slice(0)
arr2[0] = 5
console.log(arr1[0]); // 1
console.log(arr2[0]); // 5

第四种 concat 方法实现数组的深拷贝

var arr1 = [1,2,3]
var arr2 = arr1.concat()
arr2[0] = 5
console.log(arr1[0]); // 1
console.log(arr2[0]); // 5