如何使用 JavaScript 复制一个数组

使用诸如 JavaScript 这样的程序语言复制数组的方法多种多样，其中最常用和推荐的方法包括：使用扩展运算符（Spread operator）、使用 Array.from() 方法、使用 Array.prototype.slice() 方法、利用 Object.assign() 方法、以及通过循环（例如 for 循环）来实现深拷贝或浅拷贝。在这些方法中，使用扩展运算符是最简洁和现代的方式，它允许开发者以一种非常直观和简单的语法复制数组的元素到一个新的数组中。

使用扩展运算符复制数组的优点在于其简洁性。扩展运算符（...）能够“展开”数组中的每个元素，并将其作为新数组的一部分。这意味着你可以简单地通过在原数组之前加上...来创建一个完全新的实例。这个方法不仅代码量少，易于理解，而且处理起来非常快速和有效。

一、使用扩展运算符（SPREAD OPERATOR）

扩展运算符 (...) 是ES6引入的一个非常实用的特性，允许一个表达式扩展为多个参数或多个元素。对于数组复制来说，它提供了一种极其简洁的方式。

const originalArray = [1, 2, 3, 4];

const copiedArray = [...originalArray];
// 现在 copiedArray 是 [1, 2, 3, 4]，是 originalArray 的一个浅拷贝

使用扩展运算符进行数组复制仅适用于数组的浅拷贝，这意味着数组中的对象和数组元素只会复制其引用而非实际值。

二、使用 ARRAY.FROM() 方法

Array.from() 方法同样提供了一种简单直接地复制数组的方式。它不仅可以用于数组，还可以将类数组对象和可遍历对象转化为新数组。

const originalArray = [1, 2, 3, 4];

const copiedArray = Array.from(originalArray);
// copiedArray 现在是 originalArray 的一个浅拷贝

此方法同样只能实现数组的浅拷贝。其优点在于它还能够从类似数组的对象构建新数组，增加了复制来源的灵活性。

三、使用 ARRAY.PROTOTYPE.SLICE() 方法

slice() 方法是一个传统的、广泛用来复制数组的方法。它会返回一个新数组，这个新数组包含从开始到结束（不包括结束）索引的所有元素。

const originalArray = [1, 2, 3, 4];

const copiedArray = originalArray.slice();
// copiedArray 是 originalArray 的浅拷贝

尽管这种方法比较老旧，但它依然非常有效，且不仅仅局限于复制整个数组；slice 还可以用于提取原数组的一部分。

四、利用 OBJECT.ASSIGN() 方法

虽然 Object.assign() 主要用于复制和合并对象，但它也可以用于对数组进行浅拷贝。

const originalArray = [1, 2, 3, 4];

const copiedArray = Object.assign([], originalArray);
// 现在，copiedArray 是一个 originalArray 的浅拷贝

通过将一个空数组作为目标传递给 Object.assign()，可以基于原数组创建一个新数组。这种方法虽然不常见，但在某些情况下可能会很有用。

五、通过循环实现复制（深拷贝和浅拷贝）

最后，通过使用循环（例如 for 循环或 forEach 循环）可以手动复制数组中的每一个元素到一个新数组。这种方式虽然代码量较多，但它提供了进行深拷贝的可能性。

const originalArray = [{ a: 1 }, 2, 3];

const copiedArray = [];
for (let i = 0; i < originalArray.length; i++) {
    if (typeof originalArray[i] === 'object') {
        copiedArray[i] = {...originalArray[i]}; // 进行对象的深拷贝
    } else {
        copiedArray[i] = originalArray[i]; // 基本类型直接复制
    }
}
// copiedArray 现在是 originalArray 的一个深拷贝

通过手动检查元素类型并适当地复制它们，可以根据需要创建深拷贝或浅拷贝。这为复杂数据结构的复制提供了极大的灵活性和控制。

在以上所有的方法中，选择哪一种取决于具体需求——是否需要深拷贝、对性能的考量、以及对现代JavaScript特性的支持程度。不过无论选择哪种方法，重要的是理解每种方法的行为和限制，以确保代码的正确性和效能。

相关问答FAQs：

问题1：如何使用 JavaScript 复制一个数组并保存为新的变量？

回答：您可以使用 JavaScript 的 slice() 方法来复制一个数组，并将复制后的数组保存为一个新的变量。例如，您可以使用以下代码复制一个名为 array1 的数组并保存为 array2：

var array1 = [1, 2, 3, 4, 5];
var array2 = array1.slice();

在上述代码中，array1 是原始数组，array2 是复制后的新数组。通过使用 slice() 方法，将原始数组作为不带任何参数的方法调用，将会返回一个新的数组，该新数组与原始数组完全相同。

问题2：如何使用 JavaScript 克隆（深拷贝）一个数组？

回答：要克隆（深拷贝）一个数组，您可以使用 JavaScript 的 JSON.parse() 和 JSON.stringify() 方法的组合。通过先将数组转换为字符串，然后再将字符串转换回数组，可以实现数组的深拷贝。以下是具体的代码示例：

var array1 = [1, 2, 3, 4, 5];
var array2 = JSON.parse(JSON.stringify(array1));

在上述代码中，array1 是原始数组，array2 是克隆后的新数组。通过先使用 JSON.stringify() 方法将原始数组转换为字符串，然后再使用 JSON.parse() 方法将字符串转换回数组，从而实现了深拷贝。

问题3：如何使用 JavaScript 把一个数组的元素复制到另一个数组中？

回答：要将一个数组的元素复制到另一个数组中，您可以使用数组的 forEach() 方法。通过遍历原始数组的每个元素，并将每个元素添加到目标数组中，可以实现复制。以下是具体的代码示例：

var array1 = [1, 2, 3, 4, 5];
var array2 = [];

array1.forEach(function(element) {
  array2.push(element);
});

在上述代码中，array1 是原始数组，array2 是目标数组。使用 forEach() 方法遍历 array1 的每个元素，并使用 push() 方法将元素添加到 array2 中，从而实现了复制。注意，这种方法只适用于复制简单的基本数据类型元素。如果原始数组包含复杂的对象或引用类型元素，则只是复制了它们的引用而不是值。如果需要进行深拷贝，可以参考前面提到的使用 JSON.parse() 和 JSON.stringify() 方法的方法。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。