JavaScript数组复制的七种方法：详解与性能对比252

在JavaScript开发中，复制数组是极其常见的操作。看似简单的任务，却蕴含着多种方法和性能差异。选择合适的方法，不仅能提高代码效率，也能避免潜在的bug。本文将深入探讨JavaScript中复制数组的七种方法，并进行详细的比较和分析，帮助你选择最适合你场景的方案。

1. slice() 方法：浅拷贝的最佳选择

slice() 方法创建现有数组的一个浅拷贝。它不修改原数组，而是返回一个包含原数组所有元素的新数组。这是创建浅拷贝最简洁、最常用的方法之一。 slice() 方法可以接受两个参数：开始索引和结束索引（不包含）。省略参数则复制整个数组。
let originalArray = [1, 2, 3, 4, 5];
let newArray = (); // 复制整个数组
(newArray); // [1, 2, 3, 4, 5]
(originalArray === newArray); // false (证明是新的数组)
let newArray2 = (1, 3); // 复制索引1到2的元素
(newArray2); // [2, 3]

需要注意的是，slice() 方法进行的是浅拷贝。如果数组元素是对象，则新数组和原数组将共享同一个对象引用。修改新数组中的对象元素，也会影响原数组中的对应元素。

2. concat() 方法：合并数组并创建新数组

concat() 方法用于连接两个或多个数组，并返回一个新的数组。这是一种创建数组拷贝的方式，但它通常用于合并数组而非单纯复制。将一个空数组作为参数传入，可以实现复制的功能。
let originalArray = [1, 2, 3];
let newArray = [].concat(originalArray); // 使用concat()复制数组
(newArray); // [1, 2, 3]
(originalArray === newArray); // false

类似于slice()，concat() 也进行浅拷贝。

3. 扩展运算符 (...)：简洁的浅拷贝

ES6 引入了扩展运算符 (... )，提供了一种更简洁的浅拷贝方式。它可以将数组展开成单个元素，并创建一个新的数组。
let originalArray = [1, 2, 3];
let newArray = [...originalArray]; // 使用扩展运算符复制数组
(newArray); // [1, 2, 3]
(originalArray === newArray); // false

扩展运算符同样进行浅拷贝，其效率通常高于slice()和concat()。

4. () 方法：灵活的数组创建

() 方法可以从各种可迭代对象（包括数组）创建新的数组。传入原数组作为参数，即可实现复制。
let originalArray = [1, 2, 3];
let newArray = (originalArray);
(newArray); // [1, 2, 3]
(originalArray === newArray); // false

() 也进行浅拷贝，其性能与扩展运算符相似。

5. 循环复制：手动创建深拷贝的基础

使用循环可以手动复制数组元素。对于简单的数组，这是一种可行的方案。但对于包含嵌套对象的复杂数组，这种方法需要递归处理，才能实现深拷贝。
let originalArray = [1, 2, 3];
let newArray = [];
for (let i = 0; i < ; i++) {
newArray[i] = originalArray[i];
}
(newArray); // [1, 2, 3]
(originalArray === newArray); // false

6. (()) 方法：深拷贝

((array)) 方法可以创建数组的深拷贝，但这方法仅限于可序列化的数据。如果数组包含无法序列化的数据，例如函数或日期对象，则会报错。
let originalArray = [1, 2, {a: 3}];
let newArray = ((originalArray));
(newArray); // [1, 2, {a: 3}]
(originalArray === newArray); // false
(originalArray[2] === newArray[2]); // false (深拷贝)

7. Lodash 的 () 方法：强大的深拷贝工具

Lodash 库提供了() 方法，可以可靠地创建任何对象的深拷贝，包括复杂的嵌套数组和对象。这是处理深拷贝最方便和最安全的方案。
// 需要先安装 Lodash: npm install lodash
const _ = require('lodash');
let originalArray = [1, 2, {a: 3, b: [4,5]}];
let newArray = (originalArray);
(newArray); // [1, 2, {a: 3, b: [4, 5]}]
(originalArray === newArray); // false
(originalArray[2] === newArray[2]); // false (深拷贝)
(originalArray[2].b === newArray[2].b); // false (深拷贝)

总结：

选择哪种复制数组的方法取决于你的具体需求：对于浅拷贝，slice()，扩展运算符和()是高效简洁的选择；对于深拷贝，(()) 方法简单易用，但受限于可序列化数据；而 Lodash 的 () 方法则提供了强大的深拷贝功能，适用于各种复杂数据结构。 记住选择最符合你的项目需求和性能要求的方法。

2025-03-15

上一篇：JavaScript 对象复制的深入详解：浅拷贝与深拷贝

下一篇：JavaScript 移除事件监听器：全面指南及最佳实践