JavaScript深拷贝的几种实现方式总结

作者:函数茶馆

时间:2026-10-24

浏览:142

本文总结了JavaScript中实现深拷贝的三种常见方法:Object.assign适用于简单单层对象,JSON.parse与JSON.stringify处理深层嵌套但会丢失函数和特殊类型,递归拷贝则通过判断对象类型处理特殊情况。文章提供了具体代码示例及结果分析,帮助开发者根据实际需求选择合适的拷贝方案。

文章目录

在前端项目的数据处理中,JSON数据的拷贝是非常常见的操作。为了确保拷贝后的双方数据互不影响,通常需要采用深拷贝技术。

深拷贝的原理是:引用数据类型的名称存储在栈内存中,而实际值存储在堆内存中。栈内存中保存一个指向堆内存值的地址引用。深拷贝则是增加一个新的指针,并申请一块新的内存空间,使这个新指针指向这块新分配的内存,从而切断与原数据的引用关系。方法一:使用Object.assign()。该方法通常适用于数据类型较为简单、层级不超过1层的数据拷贝,因为Object.assign无法实现深层嵌套数据的完全拷贝。

const strJson = {
      id:'12343231',
      name:'张三',
      age:23,
      inof:{
        sex:'男'
      },
      sjid:null,
      strHandle () {
        console.log('111111111');
      }
    }
    obj.name = 'lisi'
    obj.inof.sex = '女'
    console.log('obj',obj);
    console.log('strJson',strJson);   

运行结果如下:

总结

方法二:使用JSON.parse和JSON.stringify组合。这种方法通常适用于数据类型比较复杂、存在深层嵌套结构的数据。需要注意的是,该方法无法处理undefined、function、RegExp等类型的数据。

const strJson = {
      id:'12343231',
      name:'张三',
      age:23,
      inof:{
        sex:'男'
      },
      sjid:null,
      strHandle () {
        console.log('111111111');
      }
    }
    const obj = JSON.parse(JSON.stringify(strJson))
    obj.name = 'lisi'
    obj.inof.sex = '女'
    console.log('obj',obj);
    console.log('strJson',strJson);

运行结果如下:

总结

第三种方法:使用递归拷贝。在代码中手动处理各种特殊类型和情况。

 function copyHandle (strJson) {
      let result ;
      // 判断是否存在
      if (!strJson) return null;
      // 判断是否是对象
      if (typeof strJson !== 'object') return strJson;
      // 判断是否是数组
      if (Array.isArray(strJson)) {
        result = [];
        for (let i of strJson) {
          result.push(copyHandle(i))
        }
      }//判断是否是RegExp
      else if(strJson.constructor===RegExp) {
        result = strJson
      }//判断是否是对象
      else {
        result = {}
        for (let i in  strJson) {
          result[i] = copyHandle(strJson[i])
        }
      }
      // 返回结果
      return result
    }

总结

本文到此结束,希望能为读者提供有益的帮助。同时也欢迎大家关注本站,获取更多技术内容!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章