如何在JavaScript中交替合并两个数组？含RxJS及对象数组实现方案

刚好之前也碰到过类似的需求，给你分享两种实用的实现思路，不管是基础数值数组还是对象数组都能轻松搞定～

一、基础数值数组的合并 #

1. 原生JavaScript实现（通用型） #

先写一个通用的合并函数，不管数组元素类型是什么都能用，逻辑也很直观：循环遍历到两个数组中较长的那个长度，每次循环依次把两个数组对应位置的元素加入结果数组。

function alternateMerge(arr1, arr2) {
  const merged = [];
  // 取两个数组的最大长度，避免遗漏较长数组的剩余元素
  const maxLength = Math.max(arr1.length, arr2.length);
  
  for (let i = 0; i < maxLength; i++) {
    // 只要当前索引在数组范围内，就加入结果
    if (i < arr1.length) merged.push(arr1[i]);
    if (i < arr2.length) merged.push(arr2[i]);
  }
  
  return merged;
}

// 测试数值数组
const a1 = [0, 2, 4, 6, 8];
const a2 = [1, 3, 5, 7, 9];
const mergedNumbers = alternateMerge(a1, a2);
console.log(mergedNumbers); // 输出：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

2. RxJS实现 #

如果项目中已经在用RxJS，可以利用它的流操作来实现，代码更简洁：

import { zip, from } from 'rxjs';
import { mergeAll, toArray } from 'rxjs/operators';

// 将数组转为Observable流
const a1$ = from([0, 2, 4, 6, 8]);
const a2$ = from([1, 3, 5, 7, 9]);

zip(a1$, a2$) // 按位置配对两个流的元素，得到类似 [0,1], [2,3] 的数组流
  .pipe(
    mergeAll(), // 将配对后的数组展开为单个元素的流
    toArray() // 把流中的元素收集成最终数组
  )
  .subscribe(mergedArr => {
    console.log(mergedArr); // 输出目标合并数组
  });

二、对象数组的交替合并 #

其实刚才的通用方案完全适用于对象数组，因为不管元素是数值还是对象，push的逻辑是一致的，不需要额外修改：

1. 原生JavaScript实现 #

// 测试对象数组
const objArr1 = [
  {'name': 'Lucy'}, {'name': 'Lily'}, {'name': 'Jerry'}, 
  {'name': 'Tom'}, {'name': 'Smith'}
];
const objArr2 = [
  {'name': 'Jack'}, {'name': 'John'}, {'name': 'Anan'}, 
  {'name': 'Bob'}, {'name': 'Dav'}
];

// 直接复用之前的alternateMerge函数
const mergedObjects = alternateMerge(objArr1, objArr2);
console.log(mergedObjects);
// 输出：[{'name':'Lucy'}, {'name':'Jack'}, {'name':'Lily'}, {'name':'John'}, ... , {'name':'Smith'}, {'name':'Dav'}]

2. RxJS实现 #

同样复用RxJS的逻辑，只是把输入换成对象数组即可：

const objArr1$ = from(objArr1);
const objArr2$ = from(objArr2);

zip(objArr1$, objArr2$)
  .pipe(mergeAll(), toArray())
  .subscribe(mergedObjArr => {
    console.log(mergedObjArr);
    // 得到目标交替对象数组
  });

额外提一句：如果两个数组长度不一致，比如一个长一个短，上面的方案也能自动处理——先把短数组的元素交替完，再把长数组剩下的元素依次追加到结果里，逻辑很完善～

内容的提问来源于stack exchange，提问作者蒋建雨