JavaScript数组合并的8种常用方法详解

在JavaScript开发中，合并数组是一项基础且频繁的操作。本文整理了8种常用的数组合并方式，涵盖concat()、展开运算符（Spread Operator）、push()、unshift()、splice()、Array.from()、Array.prototype.reduce()以及ES6引入的Array.prototype.flat()。

1. concat()方法

• 适用场景：用于将两个或多个数组合并，生成一个新的数组。
• 优势：语法简洁直观，且不会修改原始数组。
• 局限：每次调用都会创建新数组，在大规模数据合并时可能影响性能。

2. 展开运算符（Spread Operator）

• 适用场景：用于合并两个或多个数组，生成一个新的数组。
• 优势：代码简洁易读，支持合并任意数量的数组。
• 局限：若待合并数组数量极大，可能引发栈溢出错误。

3. push()方法

• 适用场景：用于将一个数组的所有元素追加到另一个数组的末尾。
• 优势：直接修改目标数组，无需创建新数组对象。
• 局限：仅支持在目标数组末尾追加元素。

4. unshift()方法

• 适用场景：用于将一个数组的所有元素插入到另一个数组的开头。
• 优势：直接修改目标数组，无需创建新数组对象。
• 局限：仅支持在目标数组开头插入元素。

5. splice()方法

• 适用场景：用于将一个数组的元素插入到另一个数组的指定索引位置。
• 优势：直接修改目标数组，支持在任意位置插入元素。
• 局限：会改变原始数组，可能影响依赖该数组的其他代码逻辑。

6. Array.from()方法

• 适用场景：用于将类数组对象或可迭代对象转换为数组，并合并为新数组。
• 优势：能处理多种类型的输入，具有较高灵活性。
• 局限：每次调用都会创建新数组，可能影响性能。

7. Array.prototype.reduce()方法

• 适用场景：用于遍历数组，通过累加器将元素逐个合并为新数组。
• 优势：允许自定义合并逻辑，灵活性较高。
• 局限：需要编写回调函数，语法相对复杂。

8. ES6的Array.prototype.flat()方法

• 适用场景：用于将多维数组扁平化为一维数组，并可与其他数组合并。
• 优势：能有效处理多维数组，简化代码结构。
• 局限：需ES6环境支持，旧版浏览器可能不兼容。

选择哪种方法取决于具体需求和个人偏好。若性能是关键考量，建议采用直接修改原数组的方法（如push()、unshift()、splice()）；若需更灵活的合并逻辑，可考虑reduce()。展开运算符和concat()则是常用且简单的合并方式。

以下是各方法的代码示例

1. concat()方法

• 利用concat()将两个或多个数组合并为一个新数组。
• 示例代码：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = array1.concat(array2);
console.log(mergedArray); // 输出 [1, 2, 3, 4, 5, 6]

2. 展开运算符（Spread Operator）

• 利用展开运算符将两个或多个数组合并为一个新数组。
• 示例代码：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];
console.log(mergedArray); // 输出 [1, 2, 3, 4, 5, 6]

3. push()方法

• 利用push()将一个数组的元素添加到另一个数组的末尾。
• 示例代码：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
array2.push(...array1);
console.log(array2); // 输出 [4, 5, 6, 1, 2, 3]

4. unshift()方法

• 利用unshift()将一个数组的元素添加到另一个数组的开头。
• 示例代码：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
array2.unshift(...array1);
console.log(array2); // 输出 [1, 2, 3, 4, 5, 6]

5. splice()方法

• 利用splice()将一个数组的元素插入到另一个数组的指定位置。
• 示例代码：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
array2.splice(1, 0, ...array1);
console.log(array2); // 输出 [4, 1, 2, 3, 5, 6]

6. Array.from()方法

• 利用Array.from()将类数组或可迭代对象转换为数组，并合并为新数组。
• 示例代码：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = Array.from(array1).concat(Array.from(array2));
console.log(mergedArray); // 输出 [1, 2, 3, 4, 5, 6]

7. Array.prototype.reduce()方法

• 利用reduce()遍历数组，将元素逐个合并为新数组。
• 示例代码：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [array1, array2].reduce((acc, val) => acc.concat(val), []);
console.log(mergedArray); // 输出 [1, 2, 3, 4, 5, 6]

8. ES6的Array.prototype.flat()方法

• 利用flat()将多维数组扁平化为一维数组。
• 示例代码：

const array1 = [1, 2, [3, 4]];
const array2 = [5, 6];
const mergedArray = array1.flat().concat(array2);
console.log(mergedArray); // 输出 [1, 2, 3, 4, 5, 6]

上述方法均可用于数组合并，具体选择应基于实际需求和个人偏好。

本文介绍了JavaScript数组合并的8种方法。如需了解更多相关内容，可搜索本站过往文章或继续浏览后续文章，感谢支持！