JS 浅拷贝与深拷贝

浅拷贝

浅拷贝是创建一个新的对象，复制原对象所有的基本类型的值，引用类型的值，复制的是其引用地址。当修改复制后的对象中引用类型数据的值，会对原来的对象产生影响。

深拷贝

深拷贝则是在复制一个对象时，会递归地复制其所有的属性和嵌套对象，直到完全复制了整个对象的所有引用和属性。当修改复制后的对象时，它不会影响原始对象。

object.assign 方法

object.assign 将所有可枚举的属性，从一个或多个源对象复制到目标对象。

// Object.assign(target, source)
let obj1 = {
    
     a: 1 };
let obj2 = {
    
     a: 2, b: 1}
let obj = {
    
    }
let res = Object.assign(obj, obj1, obj2)
console.log(res)
// { a: 2, b: 1 }

以上代码将源对象 obj1, obj2 的属性复制到目标对象 obj 中，如果源对象中的属性相同，则排在后面的源对象的属性值会覆盖排在前面对象的属性值。如上 obj2 的属性 a 的值覆盖了 obj1 属性a 的值，最后得到的对象属性a的值为2。

let obj = {
    
    }
const obj1 = {
    
    
  info: {
    
    
    name: 'ayetongzhi',
  }
}
const res = Object.assign(obj, obj1)
console.log(res);
// { info: { name: 'ayetongzhi' } }
res.info.name = 'maomao'
console.log(res);
// { info: { name: 'maomao' } }
console.log(obj1);
// { info: { name: 'maomao' } }

上述代码将对象 obj1 上的属性复制到对象 obj 上得到对象 res，当我们改变对象 res 属性 name 的时候，源对象 obj 的 name 属性也发生改变。

扩展运算符

扩展运算符可以实现对象的浅复制，语法为 let cloneObj = { …obj }。

let obj1 = {
    
     
  info: {
    
    
    name: 'ayetongzhi'
  }
}
const obj = {
    
    ...obj1}
console.log(obj)
// { info: { name: 'ayetongzhi' } }
obj.info.name = 'maomao'
console.log(obj);
// { info: { name: 'maomao' } }
console.log(obj1);
// { info: { name: 'maomao' } }

Array.prototype.concat 方法

concat 方法用来合并数组，也可以用来实现浅拷贝。

const arr1 = [{
    
    name:'ayetongzhi'}, 1]
const arr2 = [2, 3]
const arr = arr1.concat(arr2)
console.log(arr);
// [ { name: 'ayetongzhi' }, 1, 2, 3 ]
arr1[0].name = 'maomao'
console.log(arr);
// [ { name: 'maomao' }, 1, 2, 3 ]

以上代码，我们使用 concat 方法将数组 arr2 合并到数组 arr1 中并返回新数组 arr。我们更改数组 arr1 中对象的 name 属性，arr 中对象的 name 属性也发生改变。

Array.prototype.slice 方法

slice 方法用来复制数组，接受两个参数 startIndex 和 endIndex，分别为复制开始的索引（包含当前索引的值）和复制结束的索引（不包含当前索引的值，包含结束索引前的值）。如果不传 endIndex 参数，则从开始索引复制到数组末尾。

const arr = [{
    
    name: 'ayetongzhi'}, 1, 2]
let newArr = arr.slice(0)
newArr[0].name = 'maomao'
console.log(arr[0]);
// { name: 'maomao' }

以上代码，我们复制了数组 arr，并修改 newArr 中对象的 name 属性，arr 中的对象 name 也发生改变。