如何在JavaScript中合并数组？按顺序拼接对应元素实现方案

嘿，这两个问题我熟！来给你详细讲清楚～

一、普通合并两个数组（把两个数组的元素全部整合到一个新数组） #

这里有几种常用的方法，按需选择：

• 使用concat()方法：最经典的写法，返回一个新数组，不会修改原有的两个数组

const list1 = ["A", "B", "C"];
const list2 = ["X", "Y", "Z"];
const mergedList = list1.concat(list2);
// 最终结果: ["A", "B", "C", "X", "Y", "Z"]

• 使用ES6展开运算符（...）：语法更简洁，同样返回新数组，现在用得比较多

const list1 = ["A", "B", "C"];
const list2 = ["X", "Y", "Z"];
const mergedList = [...list1, ...list2];
// 最终结果: ["A", "B", "C", "X", "Y", "Z"]

• 使用push()方法（修改原数组）：如果不需要保留原数组，想直接把list2的元素追加到list1末尾，可以用这个

const list1 = ["A", "B", "C"];
const list2 = ["X", "Y", "Z"];
list1.push(...list2);
// 此时list1变成: ["A", "B", "C", "X", "Y", "Z"]

二、对应位置元素拼接成新数组（比如["A","B"] + ["X","Y"] → ["AX","BY"]） #

先给你提个醒：你原来的代码有两个小问题哦：

1. list3没有提前声明，直接赋值list3[i]会报错；
2. 循环条件写错了，i < list1.length && list2.length会变成只要list2不为空就一直循环，应该改成i < list1.length && i < list2.length，避免超出数组长度拿到undefined。

下面给你两种正确的实现方式：

方式1：修正后的for循环 #

const list1 = ["A", "B", "C"];
const list2 = ["X", "Y", "Z"];
const list3 = []; // 先声明空数组
for (let i = 0; i < list1.length && i < list2.length; i++) {
  list3.push(list1[i] + list2[i]); // 用push把拼接后的元素加入新数组
}
// 最终结果: ["AX", "BY", "CZ"]

方式2：用map()方法（更简洁的ES6写法） #

如果两个数组长度一致，用map一行就能搞定：

const list1 = ["A", "B", "C"];
const list2 = ["X", "Y", "Z"];
const list3 = list1.map((item, index) => item + list2[index]);
// 最终结果: ["AX", "BY", "CZ"]

要是担心两个数组长度不一样，想只处理到较短数组的长度，可以先取最小长度再处理：

const list1 = ["A", "B", "C", "D"];
const list2 = ["X", "Y", "Z"];
const minLength = Math.min(list1.length, list2.length);
const list3 = list1.slice(0, minLength).map((item, index) => item + list2[index]);
// 最终结果: ["AX", "BY", "CZ"]

内容的提问来源于stack exchange，提问作者Vianne