首页 > web前端 > js教程 > 正文

JavaScript 对象拷贝:浅拷贝与深拷贝的实现方案

紅蓮之龍
发布: 2025-11-15 20:53:02
原创
322人浏览过
浅拷贝只复制对象第一层属性,深层共享引用,常用方法有Object.assign、扩展运算符;深拷贝递归复制所有层级,实现方式包括JSON.parse(JSON.stringify())、递归函数处理循环引用、Lodash的cloneDeep和浏览器原生structuredClone。

javascript 对象拷贝:浅拷贝与深拷贝的实现方案

JavaScript 中对象拷贝分为浅拷贝和深拷贝,理解它们的区别和实现方式对开发非常重要。浅拷贝只复制对象的第一层属性,深层嵌套仍共享引用;而深拷贝会递归复制所有层级,生成完全独立的对象。

浅拷贝的实现方法

浅拷贝适用于对象只有一层基本数据类型属性的情况。以下是一些常见的浅拷贝方式:

  • Object.assign():将源对象的所有可枚举属性复制到目标对象
  • const obj1 = { a: 1, b: { c: 2 } };
    const obj2 = Object.assign({}, obj1);
  • 扩展运算符(...):语法简洁,使用广泛
  • const obj2 = { ...obj1 };
  • Array.prototype.slice()(针对数组)
  • const arr2 = arr1.slice();

注意:当对象包含嵌套对象或数组时,这些方法仅复制引用,修改嵌套结构会影响原对象。

深拷贝的基本实现思路

深拷贝需要递归遍历对象的所有属性,确保每一层都是新创建的。常见实现方式包括:

立即学习Java免费学习笔记(深入)”;

  • JSON.parse(JSON.stringify()):简单有效,但有局限性
  • const newObj = JSON.parse(JSON.stringify(oldObj));

    这种方法无法处理函数、undefined、Symbol、Date、RegExp 和循环引用,且 Date 会被转为字符串。

    阿贝智能
    阿贝智能

    阿贝智能是基于AI技术辅助创作儿童绘本、睡前故事和有声书的平台,助你创意实现、梦想成真。

    阿贝智能 17
    查看详情 阿贝智能
  • 递归手动实现:更灵活,可控制类型处理
  • function deepClone(obj) {
     if (obj === null || typeof obj !== 'object') return obj;
     if (obj instanceof Date) return new Date(obj);
     if (obj instanceof RegExp) return new RegExp(obj);
     const cloned = Array.isArray(obj) ? [] : {};
     for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
       cloned[key] = deepClone(obj[key]);
      }
     }
     return cloned;
    }

处理循环引用

递归深拷贝在遇到循环引用时会陷入无限循环。可通过 WeakMap 记录已访问对象来解决:

function deepClone(obj, hash = new WeakMap()) {
 if (obj === null || typeof obj !== 'object') return obj;
 if (hash.has(obj)) return hash.get(obj); // 返回已存在的拷贝
 const cloned = Array.isArray(obj) ? [] : {};
 hash.set(obj, cloned); // 先记录引用
 for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
   cloned[key] = deepClone(obj[key], hash);
  }
 }
 return cloned;
}

现代工具库的支持

实际项目中推荐使用成熟库处理复杂情况:

  • Lodash 提供 _.cloneDeep() 方法,稳定支持各种类型和循环引用
  • const _ = require('lodash');
    const cloned = _.cloneDeep(original);
  • structuredClone()浏览器原生支持的深拷贝 API(较新)
  • const cloned = structuredClone(obj);

    该方法支持多数内置类型,但兼容性需注意(Node.js 17+,现代浏览器)

基本上就这些。选择拷贝方式时,根据数据结构复杂度和性能要求权衡。简单场景用扩展运算符或 JSON 方法,复杂对象建议用 Lodash 或 structuredClone。

以上就是JavaScript 对象拷贝:浅拷贝与深拷贝的实现方案的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号