深拷贝 浅拷贝 递归

浅拷贝指的是创建一个新对象,其中包含原始对象的引用(指针),并没有真正将原始对象的数据复制到新对象中,因此新对象与原始对象共享部分或全部数据。

深拷贝指的是创建一个新对象,并递归地将原始对象的数据复制到新对象中,因此新对象与原始对象之间不存在数据共享

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

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

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

const obj = { name: 'longge', age: 16, arr: [] } 
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 newArr = arr.slice()
      console.log(newArr)
      newArr[3].a = 100
      console.log(arr)

深拷贝 JSON.stringify 与 JSON.parse 

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

* const newObj = JSON.parse(JSON.stringify(obj))

      console.log(newObj)//{name: 'longge', age: 16, arr: Array(0), o: {…}, d: '2023-11-23T11:15:04.081Z'}

      obj.arr.push(100)

      console.log(obj, newObj)

   深拷贝   自己实现 递归

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) 

函数自己调用自己

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

你可能感兴趣的:(javascript,前端,vue.js)