js学习第十四天

浅拷贝

浅拷贝:拷贝的对象和源对象相互有影响

 浅拷贝方式一： Object.assign(目标对象,源对象)

const obj = { name: 'longge', age: 16, arr: [] }
      const newObj = {}
     
      Object.assign(newObj, obj)
      console.log(newObj)
      obj.age = 17
      obj.arr.push(1)
      console.log(newObj, obj) 

 浅拷贝方式二： 展开运算符

const obj = { name: 'longge', age: 16, arr: [] }
 const newObj = { ...obj }
      console.log(newObj)
      newObj.arr.push(10)
      console.log(obj)
      const arr = [1, 2, 3, { a: 1 }]
      const newArr = [...arr]
      console.log(newArr)
      newArr[3].a = 100
      console.log(arr) 

 浅拷贝方式三: concat / slice 

 const arr = [1, 2, 3, { a: 1 }]
       const newArr = [].concat(arr)
       console.log(newArr)
       newArr[3].a = 100
       console.log(arr)

const arr = [1, 2, 3, { a: 1 }]
     
      const newArr = arr.slice()
      console.log(newArr)
      newArr[3].a = 100
      console.log(arr)

 深拷贝

拷贝的对象和源对象没有影响

深拷贝 1 ：JSON.stringify 与 JSON.parse

缺点 忽略函数、属性值为undefined的属性

const obj = {
        name: 'longge',
        age: 16,
        arr: [],
        o: { a: 1, b: 2 },
        // f: function () {},
        c: undefined,
        d: new Date(),
      }
      obj.o1 = obj weakMap
      // 深拷贝 1 JSON.stringify 与 JSON.parse
      //        缺点 忽略函数、属性值为undefined的属性
       const newObj = JSON.parse(JSON.stringify(obj))
      console.log(newObj)
      obj.arr.push(100)
      console.log(obj, newObj) 

深拷贝 2 利用第三方库Lodash(提供很多工具方便开发) 

const obj = {
        name: 'longge',
        age: 16,
        arr: [],
        o: { a: 1, b: 2 },
        // f: function () {},
        c: undefined,
        d: new Date(),
      }
 console.log(_)
      const newObj = _.cloneDeep(obj)
      console.log(newObj) 

深拷贝 3 自己实现 递归

 const obj = {
        name: 'longge',
        age: 16,
        arr: [],
        o: { a: 1, b: 2 },
        // f: function () {},
        c: undefined,
        d: new Date(),
      }
function deepClone(obj) {
        if (obj == null) return obj
        if (obj instanceof Date) return new Date(obj)
        if (typeof obj !== 'object') return obj
        // obj 是对象或数组
        const newObj = new obj.constructor()
        for (let k in obj) {
          newObj[k] = deepClone(obj[k])
        }
        return newObj
      }
      const o = { a: 1, b: 2, c: { m: 20 } }
      const newObj = deepClone(obj)
      // newObj.c.m = 30
      console.log(newObj)
      // console.log(o)

递归 

函数自己调用自己

举例：

 求 1 2 3 5 8 13 21 34 55 89 ... 的第10个数是多少？

<script>
      
      function getNum(n) {
        if (n === 2) return 2
        if (n === 1) return 1
        return getNum(n - 1) + getNum(n - 2)
      }

      console.log(getNum(10))
      /*
        getNum(5)  getNum(4)+ getNum(3) 5 +  3
        getNum(4)  getNum(3)+ getNum(2)  3  + 2
        getNum(3)  getNum(2)+ getNum(1) = 2 +1
      */
    </script>