JS深浅拷贝实现_对象复制技巧对比-js教程-PHP中文网

JS深浅拷贝实现_对象复制技巧对比

幻影之瞳

发布： 2025-11-16 20:49:18

原创

353人浏览过

浅拷贝只复制对象第一层属性，深层仍共享引用，常用方法有Object.assign、扩展运算符；深拷贝则递归复制所有层级，实现方式包括JSON.parse(JSON.stringify())、递归函数和structuredClone()，后者支持更多数据类型但不兼容函数与DOM节点。

js深浅拷贝实现_对象复制技巧对比

在JavaScript中，对象和数组的复制并不是简单的赋值操作。由于引用类型的特性，直接赋值只会复制引用，导致原对象和复制对象共享同一块内存空间。为了解决这个问题，就需要使用深拷贝或浅拷贝。下面介绍它们的区别与实现方式。

浅拷贝：只复制第一层属性

浅拷贝会创建一个新对象，并将原对象的可枚举属性复制过来，但这些属性如果是对象或数组，仍然只是复制了引用。

常见的浅拷贝方法有：

Object.assign()：适用于普通对象的一层复制
扩展运算符（...）：语法简洁，常用于对象和数组的浅拷贝
Array.prototype.slice()：对数组进行浅拷贝

示例：

const obj = { a: 1, b: { c: 2 } };
const copy = { ...obj };
copy.b.c = 3;
console.log(obj.b.c); // 输出 3，说明内部对象是共享的

登录后复制

深拷贝：完全独立的新对象

深拷贝会递归复制对象的所有层级，确保新对象与原对象彻底分离，修改互不影响。

实现深拷贝的常见方式包括：

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

查看详情

JSON.parse(JSON.stringify(obj))：简单有效，但有局限性，如无法处理函数、undefined、Symbol、循环引用等
递归实现：手动遍历对象属性，对每个引用类型进行递归复制
structuredClone()：现代浏览器支持的新API，能较好处理多数数据类型（包括日期、正则、嵌套对象等）

示例（递归深拷贝）：

function deepClone(obj, visited = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (visited.has(obj)) return visited.get(obj); // 处理循环引用

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

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

登录后复制