js深复制和浅复制

Posted 2020-09-25 小情绪^_^

一、关于数组的拷贝

常见问题：

  let arr = [1, 2, 3, 4]；
  let arr2 = arr
  arr2[2] = 10;
  console.log(arr[2])；   // 10
  console.log(arr2[2]);   //10

很明显我们只想改变arr2的值，保持arr不变，但是事实是两个都会变，这是因为在js中，我们复制对象或者数组实际上只是复制了它的地址，而不是复制的真实的值，这就是我们常说的深复制和浅复制的区别：

深复制：将变量的数据赋值给对应变量

浅复制：将变量的存储地址赋值给对应变量

 

解决办法：

1.利用数组的slice(start [,end]):该方法可以返回一个数组的其中某部分元素，具体使用可以参见 slice()的使用方法，当我们start为0并且不设置end参数时默认取数组的所有元素

let arr2 = arr.slice(0);

 

2.利用数组的concat(): 该方法用于连接两个或多个数组，返回一个新数组，不会改变当前数组

let arr2 = arr.concat();

 

二、关于对象的拷贝

常见问题：

let person={
  name:‘张三‘,
  age:12,
  family:[‘mom‘,‘dad‘,‘son‘]
}
let person2 = person;
person2.name = ‘李四‘;
console.log(person2.name);   //李四
console.log(person.name);   //李四

 

同理，我们也不想改变person的属性，只想改变person2的属性

解决办法：

1.利用JSON.stringify()和JSON.parse()进行转换

let person2=JSON.parse(JSON.stringify(person));