js的深拷贝和浅拷贝含义与区别

一、基本概念

浅拷贝：只是复制了原数据的内存地址，其中任一数据元素发生改变，会影响另一个。

深拷贝：两个数据指向了不同的地址，数据元素发生改变时不会相互影响。

二、适用对象

js有两大数据类型有基本类型和引用类型

基本数据类型：Number、String、Boolean等

引用数据类型：Array、Object等

浅拷贝和深拷贝只适用于引用数据类型

三、浅拷贝

1、直接赋值方式

let obj = { a:1, arr:[2,3]};
let res = obj
console.log(res === obj)           // true，res和obj指向同一地址
console.log(res.arr === obj.arr)   // true，res和obj的元素也指向同一地址
obj.a=2
console.log(res)                   // { a:2, arr:[2,3]}
obj.arr[0]=4
console.log(res)                   // { a:2, arr:[4,3]}

2、Object.assign方式

let obj = { a:1, arr:[2,3]};
let res = Object.assign({}, obj)
console.log(res === obj)           // false，res和obj指向不同地址
console.log(res.arr === obj.arr)   // true，res和obj的元素指向同一地址
obj.a=2
console.log(res)                   // { a:1, arr:[2,3]}
obj.arr[0]=4
console.log(res)                   // { a:1, arr:[4,3]}

 Object.assign就是新建一个变量，然后把老变量的所有属性，以赋值的方式赋给新变量。改变新对象的属性的值，如果这个属性是基本数据类型，则不会影响老变量，例如上图的a属性；如果这个属性是引用类型，会影响老变量，例如上图的arr属性

四、深拷贝

//  使用JSON的stringify和parse是深拷贝的一种方式，在vue里一般用cloneDeep
//（但是这个方法有坑，不建议使用，这里只是做个示例）

let obj = { a:1, arr:[2,3]};
let res = JSON.parse(JSON.stringify(obj))
console.log(res === obj)           // false
console.log(res.arr === obj.arr)   // false
obj.a=2
console.log(res)                   // { a:1, arr:[2,3]}
obj.arr[0]=4
console.log(res)                   // { a:1, arr:[2,3]}

五、总结

数组或者对象的赋值，使用优先级：cloneDeep > Object.assign > 直接赋值，防止有坑