JavaScript对象拷贝方法_javascript数据操作-js教程-PHP中文网

JavaScript对象拷贝方法_javascript数据操作

紅蓮之龍

发布： 2025-12-05 20:58:02

原创

947人浏览过

浅拷贝只复制对象第一层，嵌套属性共享同一引用，常用方法有Object.assign()和扩展运算符；深拷贝递归复制所有层级，完全隔离数据，可使用JSON.parse(JSON.stringify())或递归实现，推荐Lodash的cloneDeep处理复杂场景。

javascript对象拷贝方法_javascript数据操作

JavaScript中对象拷贝是数据操作的常见需求，尤其在状态管理、函数式编程和避免副作用时尤为重要。直接赋值不会创建新对象，而是引用原对象，修改会影响原始数据。为避免这类问题，需要进行对象拷贝。根据拷贝深度不同，分为浅拷贝和深拷贝。

浅拷贝（Shallow Copy）

浅拷贝只复制对象的第一层属性，如果属性值是基本类型，会复制其值；如果是引用类型（如数组、对象），则复制的是引用地址，因此嵌套对象仍共享同一内存空间。

常用实现方式包括：

Object.assign()：将一个或多个源对象的所有可枚举属性复制到目标对象
扩展运算符（...）：语法简洁，推荐用于简单场景

const obj = { a: 1, b: { c: 2 } };
const copy1 = Object.assign({}, obj);
const copy2 = { ...obj };

copy1.a = 10;
copy1.b.c = 20;

console.log(obj.b.c); // 20，说明嵌套对象被共用

登录后复制

深拷贝（Deep Copy）

深拷贝会递归复制对象的所有层级，生成完全独立的新对象。适用于嵌套结构复杂、需彻底隔离原数据的场景。

立即学习“Java免费学习笔记（深入）”；

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

508

查看详情

实现方式有多种，各有优劣：

JSON.parse(JSON.stringify(obj))：简单快捷，但有局限性，如不支持函数、undefined、Symbol、循环引用等
递归遍历实现：可定制化强，能处理大多数类型，但需注意性能和边界情况
使用第三方库（如 Lodash 的 cloneDeep）：功能完整，稳定可靠

// 使用 JSON 方法（注意限制）
const deepCopy = JSON.parse(JSON.stringify(obj));

// 简易递归实现（基础版本）
function deepClone(obj, hash = new WeakMap()) {
  if (obj == null || typeof obj !== 'object') return obj;
  if (hash.has(obj)) return hash.get(obj); // 处理循环引用

  const clone = Array.isArray(obj) ? [] : {};
  hash.set(obj, clone);

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key], hash);
    }
  }
  return clone;
}

登录后复制