JavaScript---浅拷贝与深拷贝

• 浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。
  浅拷贝

 <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
 <script>
// 引入lodash函数库
   // import * as _ from 'lodash'
   let person = {
     name: '张三',
     age: 20,
     arr: [1,2,3],
     friends: {
       f1: '小青蛙',
       f2: '小蛤蟆'
     }
   }
   // 方法1 Object.assign()
   let shallowPerson1 = Object.assign({}, person)
   console.log(shallowPerson1);
   shallowPerson1.arr[0] = 28
   console.log(shallowPerson1.arr[0]); // 28
   console.log(person.arr[0]); // 28

   // 方法2 拓展运算符...
   let shallowPerson2 = {...person}
   shallowPerson2.arr[1] = 29

   console.log(shallowPerson2.arr[1]); // 29
   console.log(person.arr[1]); // 29

   // 方法3 lodash函数库
   let shallowPerson3 = _.clone(person)
   shallowPerson3.arr[2] = 30
   console.log(shallowPerson3.arr[2]); // 30
   console.log(person.arr[2]); // 30
   </script>

• 深拷贝：将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

深拷贝

 <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
 <script>
	// 引入lodash函数库
    // import * as _ from 'lodash'
     let person = {
	    name: '张三',
	    age: 20,
	    arr: [1,2,3],
	    friends: {
	      f1: '小青蛙',
	      f2: '小蛤蟆'
	    }
	  }
    
	// 方法1 JSON
    let deepPerson1 = JSON.parse(JSON.stringify(person))
    deepPerson1.arr[0] = 101
    console.log(deepPerson1.arr[0]);
    console.log(person.arr[0]);

    // 方法2 lodash函数库
    let deepPerson2 = _.cloneDeep(person)
    deepPerson2.arr[1] = 102
    console.log(deepPerson2.arr[1]); // 102
    console.log(person.arr[1]); // 30

    // 方法3 递归实现
    // let deepPerson3 
    // 判断是否是基本数据类型
    function isObj(obj) {
      return obj instanceof Object
    }
    function deepPerosn(obj) {
      // 判断是否传入一个对象接受
      let newObj = Array.isArray(obj) ? [] : {}
      for(let key in obj) {
        if(!isObj(obj[key])) {
          newObj[key] = obj[key]
        } else {
          newObj[key] = deepPerosn(obj[key])
        }
      }
      return newObj
    }

    let deepPerson3 = deepPerosn(person)
    deepPerson3.arr[2] = 103
    console.log(deepPerson3.arr[2]); // 103
    console.log(person.arr[2]); //30
  </script>

浅拷贝改动拷贝的数组原数组也会变（慎用！项目中很多地方共用的数组都会变）。深拷贝修改新数组不会改到原数组。