JavaScript数组复制的多种方法及性能比较271

在JavaScript开发中，数组复制是极其常见的操作。然而，简单的赋值操作并不会创建数组的副本，而是创建一个指向原数组的引用。这意味着修改新数组会同时影响原数组，这在很多场景下是不希望看到的。因此，理解并掌握多种JavaScript数组复制方法及其性能差异至关重要。本文将深入探讨几种常用的数组复制方法，并分析它们的优缺点和适用场景。

1. 浅拷贝 (Shallow Copy)

浅拷贝只复制数组的顶层元素，如果数组元素是引用类型（例如对象或另一个数组），则只复制其引用，而不是复制其内容。这意味着，修改新数组中引用类型的元素，也会影响原数组中的对应元素。浅拷贝的方法主要有以下几种：
`slice()`方法：这是最常用的浅拷贝方法之一。它创建一个包含原数组中指定部分元素的新数组。如果不指定参数，则复制整个数组。例如：


let arr1 = [1, 2, { a: 1 }, [4, 5]];
let arr2 = ();
arr2[2].a = 2; // 修改 arr2 中的对象元素
arr2[3][0] = 6; // 修改 arr2 中的数组元素
(arr1); // 输出: [1, 2, { a: 2 }, [6, 5]] // 原数组也被修改了
(arr2); // 输出: [1, 2, { a: 2 }, [6, 5]]


`concat()`方法：`concat()`方法可以将多个数组合并成一个新数组。如果只传入一个数组，则相当于复制该数组。例如：


let arr1 = [1, 2, { a: 1 }, [4, 5]];
let arr2 = [].concat(arr1);
arr2[2].a = 2;
arr2[3][0] = 6;
(arr1); // 输出: [1, 2, { a: 2 }, [6, 5]] // 原数组也被修改了
(arr2); // 输出: [1, 2, { a: 2 }, [6, 5]]


展开运算符 (`...`)：这是ES6引入的一种简洁的浅拷贝方式。例如：


let arr1 = [1, 2, { a: 1 }, [4, 5]];
let arr2 = [...arr1];
arr2[2].a = 2;
arr2[3][0] = 6;
(arr1); // 输出: [1, 2, { a: 2 }, [6, 5]] // 原数组也被修改了
(arr2); // 输出: [1, 2, { a: 2 }, [6, 5]]

2. 深拷贝 (Deep Copy)

深拷贝会递归地复制数组的所有元素，包括嵌套的引用类型。修改新数组中的任何元素都不会影响原数组。实现深拷贝的方法相对复杂，通常需要使用递归或第三方库。
使用 `((arr))`：这是一个简单的深拷贝方法，但它只适用于可以被JSON序列化的数据类型。例如：


let arr1 = [1, 2, { a: 1 }, [4, 5]];
let arr2 = ((arr1));
arr2[2].a = 2;
arr2[3][0] = 6;
(arr1); // 输出: [1, 2, { a: 1 }, [4, 5]] // 原数组没有被修改
(arr2); // 输出: [1, 2, { a: 2 }, [6, 5]]

需要注意的是，这种方法无法处理函数、Date对象等非JSON可序列化类型。如果数组包含这些类型，则会丢失这些信息。
递归深拷贝：对于更复杂的场景，可以编写递归函数来实现深拷贝。但这需要小心处理各种数据类型，代码会比较冗长。

3. 第三方库：Lodash 的 `cloneDeep()`

Lodash是一个功能强大的JavaScript实用程序库，提供了`cloneDeep()`方法，可以可靠地进行深拷贝，并能处理各种数据类型，包括函数和Date对象。使用Lodash可以简化深拷贝的实现，并提高代码的可读性。
const _ = require('lodash'); // 需要安装 lodash: npm install lodash
let arr1 = [1, 2, { a: 1 }, [4, 5], new Date()];
let arr2 = (arr1);
arr2[2].a = 2;
arr2[3][0] = 6;
arr2[4].setFullYear(2024);
(arr1); // 原数组没有被修改
(arr2);

4. 性能比较

不同的数组复制方法性能差异较大。`slice()`和展开运算符的性能通常优于`concat()`。而深拷贝方法，特别是递归深拷贝，性能开销会更大。`(())`的性能也受到数据大小和复杂度的影响，在大规模数据处理中可能会成为瓶颈。Lodash的`cloneDeep()`方法在性能方面通常表现较好，但需要引入额外的依赖。

总结

选择合适的数组复制方法取决于具体的需求和场景。如果只需要复制顶层元素，浅拷贝方法（`slice()`、`concat()`、展开运算符）就足够了，并且效率更高。如果需要复制整个数组，包括嵌套的引用类型，则需要使用深拷贝方法。对于简单的场景，`(())`可以满足需求，但要小心其局限性。对于复杂的场景或需要处理各种数据类型，建议使用Lodash的`cloneDeep()`方法，虽然需要引入依赖，但可以提高代码的可维护性和可靠性。在实际应用中，需要根据数组大小、复杂度和性能要求选择最合适的方案。

2025-04-22

上一篇：JavaScript日期和时间处理详解：常用方法及技巧

下一篇：JavaScript分页算法详解及优化策略