JavaScript数组克隆全解析：从浅拷贝到深拷贝的完整指南

数组在JavaScript里是最常用的数据结构，但“怎么把一个数组克隆出来”这个问题，几乎每个写前端的人都会在某次改bug时突然意识到——直接用等号赋值，根本不是克隆。你会发现自己改了新数组，原数组也悄悄变了。这就是引用赋值的坑。本文就从最基本的问题讲起，把JS数组克隆的各种方法、原理、边界情况和实际场景一次性说透，覆盖浅拷贝、深拷贝、循环引用、特殊对象处理，以及项目里真正用得上的方案取舍。不管你是刚入门还是已经在写业务代码，这篇文章都值得收藏。

1. 引用赋值的“伪克隆”：为什么arr2 = arr1一改就翻车

很多初学者第一次写数组克隆时，大概率干过这样的事：

js复制const arr1 = [1, 2, 3];
const arr2 = arr1;
arr2.push(4);
console.log(arr1); // [1, 2, 3, 4]

arr1居然也被改了。问题就出在：arr2 = arr1并没有创建新数组，它只是让arr2和arr1指向了同一块内存区域。JavaScript中的数组是引用类型，变量里存的是数组对象的引用地址，赋值操作复制的是这个地址，而不是数组本身。

用一个生活化的类比来理解：arr1相当于一个房子的地址（比如“幸福小区3栋202”），arr2 = arr1相当于你复制了一张写着同样地址的纸条。你拿着第二张纸条去房子里搬走一个沙发，第一张纸条指向的还是同一个房子，沙发自然也没了。所以只要你想真正“克隆”出一个独立的新数组，就必须在内存中开辟一块新空间，把元素复制过去，而不是复制地址。

判断是不是真克隆，最直观的方式是看两个数组是否各自独立：

js复制const arr1 = [1, 2, 3];
const arr2 = arr1;
console.log(arr1 === arr2); // true，说明指向同一个数组对象

而真正的克隆，比较结果应该是false。下面要讲的浅拷贝和深拷贝方法，共同点都是生成一个全新的数组对象，区别在于数组内部元素的处理深度。

2. 浅拷贝四大招：slice、concat、展开运算符、Array.from怎么选

浅拷贝是克隆数组的基础方案。所谓“浅”，意思是它只复制数组的第一层结构。如果数组元素是基本类型（数字、字符串、布尔值等），浅拷贝后两个数组互不影响；但如果元素是对象或数组，那复制的是元素的引用，新数组里第n项和原数组第n项仍然指向同一个对象。这一点的详细翻车现场放在第3节讲。

常用的浅拷贝方法有四种，每一种都值得认真对待。

2.1 arr.slice()：最老牌的克隆方式

slice()方法本来是用来截取数组片段的，但如果不传参数，它就会返回一个从头到尾的新数组：

js复制const arr1 = [1, 2, 3];
const arr2 = arr1.slice();
arr2.push(4);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4]

这是老项目中非常常见的写法，兼容性极好，即使在旧浏览器里也能跑。唯一值得注意的是，slice()是数组原型上的方法，如果某个环境里数组的原生方法被修改过（比如被polyfill覆盖了），行为可能不一样，但这个概率极低。

2.2 arr.concat()：顺手也能克隆

concat()是用来拼接数组的方法，但同样可以只传一个空参数或什么都不传，返回一个新数组：

js复制const arr1 = [1, 2, 3];
const arr2 = arr1.concat();
arr2.push(4);
console.log(arr1); // [1, 2, 3]

不过用concat()克隆在语义上不如slice()清晰，毕竟看到concat()的第一反应是“拼接”而不是“克隆”。但从功能上说，它完全没问题。如果传入了多个参数，还能顺便扩容：

js复制const arr = [1, 2];
const newArr = arr.concat([3, 4], 5);
// [1, 2, 3, 4, 5]

2.3 展开运算符：[...arr]是当代最推荐的方式

ES6之后，展开运算符（spread syntax）成了克隆数组的主流写法：

js复制const arr1 = [1, 2, 3];
const arr2 = [...arr1];
arr2.push(4);
console.log(arr1); // [1, 2, 3]

这行代码的本质是：把arr1的元素依次展开，放入一个新数组字面量中。它的可读性非常好，几乎不需要注释就能明白在做什么。而且在现代TypeScript项目、React/Vue项目中，这种写法已经非常普遍。

需要注意一个细节：展开运算符只能用于可迭代对象。数组、Set、Map、字符串都可以，但普通对象不行。如果你想克隆一个普通对象，得用对象展开运算符{...obj}，别搞混了。

2.4 Array.from()：类数组也能克隆的万能选手

Array.from()是一个静态方法，它的设计初衷是把类数组对象（比如arguments、NodeList）或可迭代对象转换成真正的数组。但用来克隆普通数组同样有效：

js复制const arr1 = [1, 2, 3];
const arr2 = Array.from(arr1);
arr2.push(4);
console.log(arr1); // [1, 2, 3]

Array.from()的独特价值在于它还能接受一个映射函数：

js复制const arr1 = [1, 2, 3];
const arr2 = Array.from(arr1, item => item * 2);
// [2, 4, 6]

这一步在克隆的同时完成了数据变换，相当于map()的替代写法。但如果是单纯克隆，用它就有点大材小用了。

2.5 四者对比与选型参考

我的建议是：现代项目里用展开运算符就够了，简单直观；如果遇到老环境（比如某些内部系统还在跑IE），用slice()或concat()不会有兼容问题。千万别为了纯克隆去用Array.from()，它更适合处理类数组对象。

3. 嵌套数组的翻车现场：为什么浅拷贝改一个却动一片

浅拷贝对基本类型元素是安全的，但一旦数组里套着对象或数组，问题就来了。看这个例子：

js复制const arr1 = [
  { name: '张三', age: 20 },
  { name: '李四', age: 22 }
];
const arr2 = [...arr1];
arr2[0].age = 30;
console.log(arr1[0].age); // 30，原数组也被改了！

arr2明明是克隆出来的新数组，为什么修改arr2里对象的属性，arr1里的对象也跟着变？原因在于：浅拷贝复制的是对象元素的引用地址，而不是对象本身。arr2[0]和arr1[0]指向的是同一个对象。

打个比方，arr1和arr2是两个不同的文件柜，但文件柜里放的是同一叠文件的复印件指向——两边都在看同一份原始文件。你用笔改了文件内容，另一边打开文件自然也是改过的。

再来看一个更经典的嵌套数组示例：

js复制const arr1 = [[1, 2], [3, 4]];
const arr2 = arr1.slice();
arr2[0][0] = 99;
console.log(arr1[0][0]); // 99

二维数组非常容易踩这个坑。你打算只改克隆出来的数组，结果原数组的所有内层数组都被动了。很多业务场景里的“表格数据”、“矩阵数据”、“树形数据转数组”都多多少少带有嵌套结构，这时候浅拷贝就无法满足需求了，必须上深拷贝。

判断一个数组是否需要深拷贝，可以留意这几个特征：

• 数组元素中有对象字面量、数组或类数组结构
• 你需要在克隆后修改内部元素的属性而不影响原数组
• 数据来源是接口返回的复杂JSON结构，后续要基于它做编辑、回滚、对比

如果命中以上任意一条，浅拷贝是不够用的。下面进入深拷贝的部分。

4. 深拷贝的正确打开方式：JSON序列化与原生structuredClone的边界

深拷贝的目标是“彻底复制整棵树”，新数组里的每个嵌套对象、嵌套数组都是独立的新对象，和原数组完全脱钩。常见的深拷贝方案有好几类，各有各的适用范围，我一个个说清楚。

4.1 JSON.parse(JSON.stringify())：最出名但坑也最多

js复制const arr1 = [{ name: '张三', tags: ['前端', 'Vue'] }];
const arr2 = JSON.parse(JSON.stringify(arr1));
arr2[0].tags.push('React');
console.log(arr1[0].tags); // ['前端', 'Vue']，没被影响

这个方法的核心思路是：先把数组序列化成JSON字符串，再把这个字符串解析回全新的数据结构。由于JSON字符串是纯文本，解析后自然没有任何引用关系，所以深层嵌套也可以完全脱钩。

但JSON序列化的坑非常多，务必要了解：

• 函数会被丢弃。如果对象里有方法，序列化时会直接忽略。
• undefined和Symbol值会被丢弃。数组中的undefined会被转成null（因为JSON数组里没有undefined的概念），对象属性中的undefined则直接被删掉。
• Date对象会被转成字符串。new Date()经过JSON序列化会变成ISO格式的字符串，反序列化后就不是Date类型了，这会导致后续调用getTime()之类的方法时报错。
• RegExp对象会被转成空对象{}，丢了正则表达式。
• NaN、Infinity会被转成null，因为JSON没有这些特殊数值类型。
• 循环引用会直接报错：TypeError: Converting circular structure to JSON。
• BigInt会报错：TypeError: Do not know how to serialize a BigInt。

所以JSON.parse(JSON.stringify())只适用于“纯数据”的业务对象——对象里只有字符串、数字、布尔值、数组、普通对象，没有函数、日期、正则、循环引用。如果你的数据满足这个条件，它是非常简单好用的方案。

js复制const badData = {
  name: 'test',
  date: new Date(),
  sayHi() { console.log('hi'); },
  regex: /abc/g,
  map: new Map([['key', 'value']])
};
console.log(JSON.parse(JSON.stringify(badData)));
// { name: 'test', date: '...', regex: {}, map: {} }
// sayHi 直接消失

如果你的数据里有这类特殊类型，就不要用JSON方案了。下面看看更靠谱的。

4.2 structuredClone()：浏览器原生深拷贝，专治各种特殊对象

structuredClone()是浏览器和Node 17+提供的原生深拷贝方法，专门解决JSON.parse(JSON.stringify())的缺陷：

js复制const arr1 = [
  { name: '张三', date: new Date(), tags: ['前端'] }
];
const arr2 = structuredClone(arr1);
arr2[0].date.setFullYear(2030);
console.log(arr1[0].date.getFullYear()); // 当前年份，不受影响

它支持Date、RegExp、Map、Set、ArrayBuffer、Blob等多种内置类型，也能正确处理循环引用：

js复制const obj = { name: 'loop' };
obj.self = obj;
const arr = [obj];
const copy = structuredClone(arr);
console.log(copy[0].self === copy[0]); // true，循环引用被正确保留，且没有报错

这是目前最推荐的深拷贝方案。使用时要确认运行环境支持——现代浏览器和Node 17+基本都没问题；Node 16或旧版浏览器需要降级方案。

有个细节：structuredClone()不能拷贝函数（会和JSON一样丢弃或抛错），也不能拷贝DOM节点。但业务数组里通常不会有函数和DOM节点，所以限制不大。

4.3 手写递归深拷贝：可控性强但需要处理很多边界

如果你需要兼容老环境，或者需要定制克隆逻辑（比如只克隆某些属性、转换某些类型），可以自己写一个深拷贝函数。我在第5节详细讲怎么实现一个能处理循环引用和特殊对象的版本。

在动手之前，先理清深拷贝的核心思路：递归遍历数组和对象，对每个元素、每个属性判断类型——如果是基本类型就直接返回，如果是数组就递归克隆，如果是对象就根据构造器分门别类地处理。

5. 手写一套能处理循环引用和特殊对象的深拷贝函数

这段代码是我在实际项目里沉淀下来的版本，经过多次踩坑调整，可以覆盖大多数场景。先看完整实现，再解释每个关键部分为什么这么写。

js复制function deepClone(target, map = new WeakMap()) {
  // 基本类型直接返回
  if (target === null || typeof target !== 'object') {
    return target;
  }

  // 处理循环引用：如果之前已经克隆过这个对象，直接返回缓存
  if (map.has(target)) {
    return map.get(target);
  }

  // 处理特殊类型
  const constructor = target.constructor;
  if (constructor === Date) {
    return new Date(target.getTime());
  }
  if (constructor === RegExp) {
    return new RegExp(target.source, target.flags);
  }
  if (constructor === Map) {
    const result = new Map();
    map.set(target, result);
    target.forEach((value, key) => {
      result.set(deepClone(key, map), deepClone(value, map));
    });
    return result;
  }
  if (constructor === Set) {
    const result = new Set();
    map.set(target, result);
    target.forEach(value => {
      result.add(deepClone(value, map));
    });
    return result;
  }

  // 处理数组和普通对象
  const cloneTarget = Array.isArray(target) ? [] : {};
  map.set(target, cloneTarget);

  // 数组：遍历索引
  if (Array.isArray(target)) {
    for (let i = 0; i < target.length; i++) {
      cloneTarget[i] = deepClone(target[i], map);
    }
  } else {
    // 对象：遍历所有可枚举的字符串属性（这里不考虑Symbol，如需支持可以再加上Reflect.ownKeys）
    Object.keys(target).forEach(key => {
      cloneTarget[key] = deepClone(target[key], map);
    });
  }

  return cloneTarget;
}

5.1 为什么用WeakMap来记录已克隆的对象

循环引用是深拷贝最头疼的问题。比如这个对象：

js复制const obj = {};
obj.self = obj;
const arr = [obj];

如果不用额外存储，递归会陷入无限循环：克隆obj时，发现它有self属性指向自己，于是又去克隆自己，再克隆自己……栈溢出。

解决方案是用WeakMap来记录“原对象 → 克隆对象”的映射关系。每次准备克隆一个对象时，先检查map里有没有它，如果有就直接返回缓存的克隆结果；没有就创建一个新对象并存入map，再去递归克隆它的属性。这样循环引用会被“截断”——第二次碰到同一个对象时，直接拿已经克隆好的新对象返回，递归就能正常结束。

选择WeakMap而不是普通Map，是因为WeakMap的键是弱引用，不会阻止垃圾回收。深拷贝一个超大对象后，如果源对象被销毁，WeakMap里的记录也能被回收，不会造成内存泄漏。

5.2 为什么要单独处理Date和RegExp

很多初学者写递归深拷贝时，会写出这样的代码：

js复制const clone = {};
for (let key in target) {
  clone[key] = deepClone(target[key]);
}

这在处理Date时会出大问题。Object.keys(date)拿到的是一个空数组（Date的日期信息不在可枚举属性里），于是克隆出来的Date变成{}，时间信息全丢了。所以像Date、RegExp这样的内置类型必须单独走它们的构造器：

js复制if (constructor === Date) {
  return new Date(target.getTime());
}
if (constructor === RegExp) {
  return new RegExp(target.source, target.flags);
}

这里用target.getTime()拿到毫秒时间戳，再重新构造一个Date，是最稳妥的方式。直接用new Date(target)或者new Date(target.toString())虽然也能用，但在某些极端情况下不够可靠，建议用时间戳。

5.3 Map和Set的克隆顺序

Map和Set的内部结构不是普通属性，直接for...in或Object.keys拿不到数据。Map必须用forEach遍历键值对，Set用forEach遍历值，且键值都要递归克隆：

js复制if (constructor === Map) {
  const result = new Map();
  map.set(target, result); // 先放入map，再递归，防止环
  target.forEach((value, key) => {
    result.set(deepClone(key, map), deepClone(value, map));
  });
  return result;
}

注意一个细节：map.set(target, result)必须在递归之前执行。如果先递归再放入map，当Map里存在循环引用时会重新进入死循环。这个顺序问题很容易被忽略。

5.4 性能与注意事项

使用这个函数时，有几个点想提醒你：

• 这个实现没有处理Symbol属性。如果对象里有Symbol作为键，可以用Reflect.ownKeys()替代Object.keys()，但要注意这会多处理不可枚举属性，行为可能跟预期不一致，所以默认不开启。
• 对于Buffer、ArrayBuffer等二进制类型，这个版本没有专门处理，会当普通对象递归。如果有这类需求，可以针对ArrayBuffer补一个分支。
• 如果数据结构特别大（比如几万条记录的表格数据），递归可能比较耗时，建议放到Web Worker里执行或者采用分批处理，不要阻塞主线程。

6. 实战中的高频应用：对象数组克隆、去重、合并与状态管理

掌握克隆方法之后，你会发现它能直接解决很多日常开发问题。下面整理了我自己实际项目中用得最多的几类场景，当然，数组去重这类经典操作也顺带一起说了。

6.1 对象数组的“防篡改”拷贝

业务中很常见的一个场景：接口返回一份配置列表，前端要把这份数据展示在页面上，同时允许用户在某些条件下临时修改部分内容。如果直接操作原数组，一旦刷新前没有恢复，数据就乱了。这时候在复制出来的数组上操作，原数组始终保持干净：

js复制const rawList = [
  { id: 1, title: '第一项', enabled: true },
  { id: 2, title: '第二项', enabled: false }
];

// 编辑时先克隆
const editingList = structuredClone(rawList);
editingList.forEach(item => item.enabled = true);

console.log(rawList[0].enabled); // true，不受影响

这种“先克隆再编辑”的思路，在实现表单编辑、拖拽排序、表格批量操作时都非常实用。比每次修改后再去反向同步原数组要靠谱得多。

6.2 数组去重：多种实现与适用场景

数组去重是面试高频题，也是实际开发里经常用的能力。不同场景适合不同方案：

js复制// 1. 基本类型数组去重：Set最简洁
const arr = [1, 2, 2, 3, 4, 4, 5];
const unique = [...new Set(arr)];
// [1, 2, 3, 4, 5]

// 2. 对象数组按特定字段去重：Map记录字段
const list = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 1, name: '张三2' }
];
const uniqueById = [...new Map(list.map(item => [item.id, item])).values()];
// 保留最后一次出现的对象：{ id: 1, name: '张三2' }, { id: 2, name: '李四' }

这里有个小坑：如果要用filter方案，注意findIndex每次都会从头遍历，大数据量下性能较差；用Map方案只需要一次遍历，配合Map的键唯一特性，效率高很多。

6.3 数组合并时的克隆考量

展开运算符不止能克隆，还能在克隆的同时合并多个数组。这是我在实际开发里最常用的“克隆+”模式：

js复制const baseList = [{ id: 1 }, { id: 2 }];
const extraList = [{ id: 3 }, { id: 4 }];

// 合并但不污染原数组
const merged = [...baseList, ...extraList];
merged[0].id = 99;
console.log(baseList[0].id); // 1，没问题

但如果数组里套着对象，展开运算符只做浅拷贝，修改嵌套对象的属性仍然会影响原数组。要彻底隔离，就得先深拷贝再合并：

js复制const merged = structuredClone([...baseList, ...extraList]);

实际使用时要根据场景判断，不要盲目深拷贝——深拷贝的性能开销比浅拷贝大一个量级，如果数据结构比较简单，浅拷贝就够用了。

6.4 状态管理框架里的克隆惯用法

在Vue和React项目中，克隆数组几乎是每天的常规操作。比如Vue中为了保证响应式更新，要返回新数组而不是直接改原数组：

js复制// Vue的列表新增/删除推荐做法：返回新数组
this.list = [...this.list, newItem];
// 或者
this.list = this.list.filter(item => item.id !== targetId);

再比如React中，状态更新必须触发不可变数据：

js复制setList(prev => [...prev.map(item => {
  if (item.id === targetId) {
    return { ...item, completed: true };
  }
  return item;
})]);

我的经验是：对于state里的数组，优先用浅拷贝配合更新操作；只有涉及嵌套层级很深且需要整体独立时，才动用深拷贝。这样既能保证响应式正确，又不会带来额外的性能损失。

6.5 大数据量下的性能优化思路

当数组非常大（比如上万条数据），每次克隆都可能带来明显的卡顿。我自己优化时用过的办法：

• 数据分片：把大数组拆成若干小块，利用requestIdleCallback分批克隆，避免一次性阻塞主线程。
• 惰性深拷贝：只有真正要修改某个嵌套对象时，才对该对象执行深拷贝，其他部分保持浅拷贝引用。框架里常见的“copy-on-write”思路就是这个。
• 直接复用：如果克隆出来的数组只是用来展示、不修改，那就干脆不克隆，用只读方案（配合Object.freeze）更省资源。

7. 我在实际项目里踩过的三个坑

写到这里，想分享几个我真实踩过的坑，希望你能少走弯路。

7.1 用JSON.parse(JSON.stringify())处理Date数据，导致时间格式出错

有一段时间我负责维护一个图表组件，里面接收的数据包含日期字段。为了做“重置筛选条件”功能，我用JSON.parse(JSON.stringify(originalData))保存了一份初始数据。结果用户每次进页面，图表上的时间都显示成字符串而不是Date格式。排查了很久才发现，问题出在JSON序列化把Date转成了字符串。后来改用structuredClone()，问题立刻消失。

如果你的项目运行环境支持structuredClone，直接用它替代JSON方案处理含日期、正则、Map的数据，能省掉一大类踩坑。

7.2 深拷贝循环引用导致页面卡死

有一次处理一个从服务端返回的配置树，后台为了省事在节点里加了一个parent指针，指向父节点。结果我用自己写的递归深拷贝函数去克隆这份数据，直接栈溢出，页面卡死。调试时发现是循环引用导致的递归死循环。从那以后，我写任何深拷贝函数都会无条件带上WeakMap缓存，绝对不忘记处理循环引用。

7.3 在Vue中直接修改props数组引发的连带bug

还有一次在Vue项目里，子组件接收了一个items数组作为prop，我在子组件的mounted里直接对this.items做了排序操作。表面看起来功能正常，但父组件里所有的视图都跟着变了，因为数组是同一个引用。后来纠正方式是在子组件里先克隆再操作：

js复制const internalItems = [...this.items];
internalItems.sort((a, b) => a.order - b.order);

这个错误提醒我：props数组绝对不能原地修改。哪怕只是排序这种看似无害的方法，也要先在克隆副本上进行。

踩过这几个坑后，我给自己定了个规矩：任何可能修改数组内容的函数，入口先明确“我是要改原数组，还是改副本”。这个从源头想清楚的习惯，比事后排查省力得多。