Skip to content

手写深拷贝

约 401 字大约 1 分钟

深拷贝js进阶

2025-05-05

引用数据类型赋值 是赋值地址 在该其中一个值的时候 两个变量的值都会改

1. 浅拷贝

如果引用数据类型只有一层

let arr = [121, 52, 5]
  • 利用for....in遍历每一个 放到新引用数据类型

    let arr = [1, 2, 3, 4]
        let newArr = []
        for (let key in arr) {
          newArr.push(arr[key])
        }
        arr[0] = 999
        console.log(arr)
        console.log(newArr)
    
    
        let obj = {
          nam: '张三',
          age: 2
        }
    
        let newObj = []
        for (let key in obj) {
          newObj[key] = obj[key]
        }
    
        obj.age = 999
        console.log(obj)
        console.log(newObj)
  • 对象 Object.assign()

        let obj = {
          nam: '张三',
          age: 2
        }
    
        let newObj = {}
        Object.assign(newObj, obj)
    
    
        obj.age = 999
        console.log(obj)
        console.log(newObj)
  • 展开运算法

    let arr = [1, 2, 3]
    let neWArr = [...arr]
    
    let arr = {name:'张三'}
    let neWArr = {...arr}

2. 深拷贝

  • JSON转换

    将数据放到栈里面,在放到堆里面

    缺点

    数据太大,会栈溢出

    栈内存的性能要求高,不可存大批数据

    JSON存有效数据 不可存 函数体 undefine转换会丢失 也会导致其他属性丢失

    JSON.parse(JSON.stringify(arr))
  • 递归 【完美】

    一层一层循环 判断当前数据类型

    如果不是引用数据 直接赋值

    如果是引用数据类型 调用自己再循环

    let obj = {
          name: '张三',
          age: 14,
          arr: [1, 2, 3],
          stu: {
            like: 12,
            id: '123',
            po: {
              name: 'wwww',
              age: 333
            }
          },
          fn: function () {
    
          },
          // reg: /^[1-9]$/
        }
    
        console.log(obj.reg)
        console.log('123'.constructor)
    
        // console.log(/^[1-9]$/ instanceof Object)
    
    
        let deepClone = (obj) => {
          if (obj === null || typeof obj !== 'object') return obj
          let newObj = Array.isArray(obj) ? [] : {}
          for (let key in obj) {
            if (obj[key] instanceof Object) {
              newObj[key] = deepClone(obj[key])
            } else {
              newObj[key] = obj[key]
            }
          }
    
          return newObj
    
        }
    
    
        console.log(deepClone(obj))
  • lodash.js

     const o = _.cloneDeep(obj)