深拷贝和浅拷贝

深拷贝和浅拷贝的区别

浅拷贝：将原对象的引用直接赋给新对象，新对象只是原对象的一个引用，而不复制对象本身，新旧对象还是共享一块内存
深拷贝：创建一个新的对象和数组，将原对象的各项属性的"值"（数组的所有元素）拷贝过来，是"值"而不是"引用"，新对象跟原对象不共享内存，修改新对象不会改到原对象

为什么要使用深拷贝？

我们希望在改变新的数组(对象)的时候，不改变原数组(对象)

数组浅拷贝

直接遍历

var array = [1, 2, 3, 4];
function copy (array) {
   let newArray = []
   for(let item of array) {
      newArray.push(item);
   }
   return  newArray;
}
var copyArray = copy(array);
copyArray[0] = 100;
console.log(array); // [1, 2, 3, 4]
console.log(copyArray); // [100, 2, 3, 4]

slice

用法：slice(start,end)　start表示是起始元素的下标，　end表示的是终止元素的下标
当slice()不带任何参数的时候，默认返回一个长度和原数组相同的新数组

var array = [1, 2, 3, 4];
var copyArray = array.slice();
copyArray[0] = 100;
console.log(array); // [1, 2, 3, 4]
console.log(copyArray); // [100, 2, 3, 4]

对象浅拷贝

Object.assign

var obj = {
  name: '张三',
  job: '学生'
}
var copyObj = Object.assign({}, obj);
copyObj.name = '李四';
console.log(obj);   // {name: "张三", job: "学生"}
console.log(copyObj);  // {name: "李四", job: "学生"}

ES6扩展运算符

var obj = {
   name: {
      firstName: '张',
      lastName: '三'
   },
   job: '学生'
}
 
var copyObj = Object.assign({}, obj)
copyObj.name.lastName = '三三';
console.log(obj.name.lastName); // 三三
console.log(copyObj.name.lastName); // 三三

深拷贝

var array = [
    { number: 1 },
    { number: 2 },
    { number: 3 }
];
var str = JSON.stringify(array);
var copyArray = JSON.parse(str)
copyArray[0].number = 100;
console.log(array); //  [{number: 1}, { number: 2 }, { number: 3 }]
console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]