本文介绍两种简洁、函数式风格的 javascript 方法，无需传统 for 循环，即可将两个数组按索引位置交替拼接（如 [a0, b0, a1, b1, ...]），并自动补全较长数组的剩余元素。
本文介绍两种简洁、函数式风格的 javascript 方法，无需传统 for 循环，即可将两个数组按索引位置交替拼接（如 [a0, b0, a1, b1, ...]），并自动补全较长数组的剩余元素。
在实际开发中，常需将两个长度不等的数组“拉链式”交错合并：取两数组相同索引位置的元素依次放入新数组，当某数组遍历完毕后，将另一数组剩余元素直接追加到末尾。例如：
const array1 = [1, 2, 3, 4, 5, 6, 7]; const array2 = ['a', 'b', 'c', 'd']; // 期望结果：[1, 'a', 2, 'b', 3, 'c', 4, 'd', 5, 6, 7]
✅ 方法一：flatMap + slice（推荐，语义清晰）
该方案分三步完成：
- 截取较短数组长度范围内的
array1元素； - 使用
flatMap将每对(array1[i], array2[i])映射为二元数组[x, y]并自动展平； - 用
concat追加array1和array2中未参与交替的剩余部分（注意：仅较长数组的剩余段有效，短数组.slice(longer.length)返回空数组，不影响结果）。
const array1 = [1, 2, 3, 4, 5, 6, 7]; const array2 = ['a', 'b', 'c', 'd']; const result = array1.slice(0, array2.length) .flatMap((x, i) => [x, array2[i]]) .concat(array1.slice(array2.length), array2.slice(array1.length)); console.log(result); // [1, 'a', 2, 'b', 3, 'c', 4, 'd', 5, 6, 7]
⚠️ 注意：
array2.slice(array1.length)在本例中返回[]（因array1更长），因此concat实际只追加了array1.slice(4)→[5, 6, 7]，逻辑安全可靠。
✅ 方法二：Array.from + flat（统一处理，灵活扩展）
利用 Array.from 创建指定长度的新数组（长度为两数组最大长度），再通过回调函数按索引智能选择元素：若当前索引超出某数组边界，则取另一数组对应位置值；否则同时取两者并组成数组，最后用 .flat() 展平所有嵌套结构。
const array1 = [1, 2, 3, 4, 5, 6, 7];
const array2 = ['a', 'b', 'c', 'd'];
const result = Array.from(
{ length: Math.max(array1.length, array2.length) },
(_, i) => {
if (i >= array1.length) return array2[i];
if (i >= array2.length) return array1[i];
return [array1[i], array2[i]];
}
).flat();
console.log(result); // [1, 'a', 2, 'b', 3, 'c', 4, 'd', 5, 6, 7]此方法天然支持任意数量数组扩展（稍作封装即可），且逻辑集中、边界判断明确，适合需要高可读性或后续增强的场景。
? 总结
-
优先推荐方法一：代码简短、执行高效、符合直觉，
flatMap+slice组合精准控制交替段与补全部分； - 方法二更通用：适用于动态数组数量或需统一索引调度的复杂合并逻辑；
- 两种方案均避免显式循环，充分利用现代 JavaScript 的函数式特性，兼具可读性与健壮性。
