深拷贝浅拷贝递归

jokerJOJO777

于 2023-11-23 19:45:26 发布

阅读量232

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/jokerJOJO777/article/details/134584076

版权

本文介绍了浅拷贝和深拷贝的概念，展示了三种浅拷贝方式（Object.assign、展开运算符和slice），以及深拷贝的两种方法（JSON.stringify+parse和自定义递归）。浅拷贝对象间共享数据，深拷贝则独立。

摘要由CSDN通过智能技术生成

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

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

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

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

浅拷贝方式一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