赋值和深/浅拷贝的区别

前端路由 hash 与 history 差异：https://juejin.cn/post/7096034733649297421

赋值和深/浅拷贝的区别

这三者的区别如下，不过比较的前提都是针对引用类型：

• 当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。

• 浅拷贝：浅拷贝是指复制对象的时候，只对第一层键值对进行独立的复制，如果对象内还有对象，则只能复制嵌套对象的地址

• 深拷贝：深拷贝是指复制对象的时候完全的拷贝一份对象，即使嵌套了对象，两者也相互分离，修改一个对象的属性，也不会影响另一个。其实只要递归下去，把那些属性的值仍然是对象的再次进入对象内部一 一进行复制即可。

浅拷贝的实现方式

对象的浅拷贝

1.设置一个新的对象obj2,通过遍历的方式将obj1对象的值
2.Object.assign()
3.Object.assign()

let obj1 = {
    person: { name: "kobe", age: 41, d: [1, 1] },
    sports: 'basketball',
    d: [1, 2, 3]
  };

  // 1.设置一个新的对象obj2,通过遍历的方式将obj1对象的值
  let obj2 = {}
  for (let i in obj1) {
    obj2[i] = obj1[i]
  }
  // // 2.Object.assign()
  // let obj2 = Object.assign({}, obj1);

  // // 3.展开运算符...
  // let obj2 = { ...obj1 };

  obj2.person.name = "wade";
  obj2.person.d = [0, 1];
  obj2.sports = 'football'
  obj2.d = [4, 5, 6]
  console.log(obj1); // { person: { name: 'wade', age: 41,d: [0,1] }, sports: 'basketball', d: [1, 2, 3] }
  console.log(obj2);// { person: { name: 'wade', age: 41 ,d: [0,1] }, sports: 'football' ,d: [ 4, 5, 6 ]}

数组的浅拷贝

1.设置一个新的对象数组,通过遍历的方式将arr1对象的值
2.Array.concat()
3.Array.slice()

// 数组的浅拷贝
  let arr1 = ['1', '2', '3', { '4': 'value' }, { d: [1, 2, 3] }]
  let arr2 = []

  // 1.设置一个新的对象数组,通过遍历的方式将arr1对象的值
  // for (let i in arr1) {
  //   arr2[i] = arr1[i]
  // }

  // // 2.Array.concat()
  // arr2 = arr1.concat();

  // 3.Array.slice()
  arr2 = arr1.slice();


  arr2[3]['4'] = '1111111111'
  arr2[4]['d'] = [4, 5, 6]
  arr2.push('6')
  console.log(arr1)  // ['1', '2', '3',{ '4': '1111111111' },{d: [4,5,6]}]
  console.log(arr2)  // ['1', '2', '3',{ '4': '1111111111' },{d: [4,5,6]},'6']

深拷贝的实现方式

深拷贝--------JSON.parse(JSON.stringify(obj))

不仅适用于数组还适用于对象！不过存在一个问题，就是不能拷贝函数

// 
  // 不仅适用于数组还适用于对象！不过存在一个问题，就是不能拷贝函数
  let obj1 = {
    a: 'one',
    b: 'two',
    c: {
      name: 'Demi'
    },
    d: [1, 2, 3],

  };

  let obj2 = JSON.parse(JSON.stringify(obj1));
  obj2.b = 'three'
  obj2.c.name = 'dingFY'
  obj2.d = [4, 5, 6]

  console.log(obj1);    // {a: "one", b: "two", c: {name: 'Demi'},d:{[ 1,2,3]}}
  console.log(obj2); // {a: "one", b: "three", c: {name: 'dingFY'},d:{[ 4, 5, 6 ]}}

  let arr1 = ['1', '2', '3', { '4': 'value' }
  ]
  let arr2 = JSON.parse(JSON.stringify(arr1))
  arr2[3]['4'] = '1111111'
  arr2.push('5')

  console.log(arr1);    // ['1', '2', '3',{ '4': 'value' }
  console.log(arr2); // ['1', '2', '3',{ '4': '1111111' ,'5'}

浅拷贝封装方法----原理：遍历对象，然后把属性和属性值都放在一个新的对象

let shallowCopy = function (obj) {
    // 只拷贝对象
    if (typeof obj !== 'object') return;
    // 根据obj的类型判断是新建一个数组还是对象
    let newObj = obj instanceof Array ? [] : {};
    // 遍历obj，并且判断是obj的属性才拷贝
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        newObj[key] = obj[key];
      }
    }
    return newObj;
  }

深拷贝封装方法----我们在拷贝的时候判断一下属性值的类型，如果是对象，我们递归调用深拷贝函数就好了

 let deepCopy = function (obj) {
      // 只拷贝对象
      if (typeof obj !== 'object') return;
      // 根据obj的类型判断是新建一个数组还是对象
      let newObj = obj instanceof Array ? [] : {};
      // 遍历obj，并且判断是obj的属性才拷贝
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          // 如果obj的子属性是对象，则进行递归操作,否则直接赋值
          newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
      }
      return newObj;
    }