嵌套数组横向拼接方案咨询：合并H、E、F二维数组

我有三个二维数组H、E、F，具体定义如下：

const H = [
    ['$', '_', '_', '_', '_', '_', '_', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '$'],
    ['$', '$', '$', '$', '$', '$', '$', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '$'],
]

const E = [
    ['$', '$', '$', '$', '$', '$', '$', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '$', '$', '$', '$', '$', '$', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '$', '$', '$', '$', '$', '$', '$'],
]

const F = [
    ['$', '$', '$', '$', '$', '$', '$', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '$', '$', '$', '$', '$', '$', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '_'],
];

我需要将这三个二维数组按H、E、F的顺序横向拼接，得到如下输出结果：

[
    ['$', '_', '_', '_', '_', '_', '_', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '$', '$', '_', '_', '_', '_', '_', '_', '_', '$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '$', '$', '_', '_', '_', '_', '_', '_', '_', '$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '$', '$', '_', '_', '_', '_', '_', '_', '_', '$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '$', '$', '_', '_', '_', '_', '_', '_', '_', '$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '$', '$', '_', '_', '_', '_', '_', '_', '_', '$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$'],
    ['$', '_', '_', '_', '_', '_', '_', '$', '$', '_', '_', '_', '_', '_', '_', '_', '$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '$', '$', '_', '_', '_', '_', '_', '_', '_', '$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '$', '$', '_', '_', '_', '_', '_', '_', '_', '$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '$', '$', '_', '_', '_', '_', '_', '_', '_', '$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '$', '$', '_', '_', '_', '_', '_', '_', '_', '$', '_', '_', '_', '_', '_', '_', '_'],
    ['$', '_', '_', '_', '_', '_', '_', '$', '$', '$', '$', '$', '$', '$', '$', '$', '$', '_', '_', '_', '_', '_', '_', '_'],
]

本质上是要把三个二维数组按顺序横向拼接成一个二维数组。请问可以通过循环实现吗？或者Lodash等JavaScript库是否提供此类功能？我接受循环实现方案，也希望了解相关JavaScript库的解决方案。

一、原生JavaScript循环实现 #

直接遍历每个数组的行，将对应行的元素依次合并即可，代码如下：

function horizontalConcat(...arrays) {
    // 假设所有输入数组的行数一致，取第一个数组的行数作为基准
    const rowCount = arrays[0].length;
    const result = [];
    for (let i = 0; i < rowCount; i++) {
        let mergedRow = [];
        // 遍历每个输入数组，取出第i行并合并
        arrays.forEach(arr => {
            mergedRow = mergedRow.concat(arr[i]);
        });
        result.push(mergedRow);
    }
    return result;
}

// 使用示例
const mergedArray = horizontalConcat(H, E, F);
console.log(mergedArray);

逻辑说明：先确定要处理的总行数（默认所有输入数组行数相同），然后逐行把每个数组的对应行拼接，最终组成新的二维数组。

二、Lodash库解决方案 #

Lodash可以通过map配合concat实现简洁的横向拼接，代码如下：

// 确保已引入Lodash
const _ = require('lodash');

// 针对H、E、F三个数组的直接写法
const mergedArray = _.map(H, (row, index) => {
    return _.concat(row, E[index], F[index]);
});

如果要支持任意数量的数组，可写成通用版本：

function horizontalConcatLodash(...arrays) {
    return _.map(arrays[0], (_, index) => {
        return _.flatMap(arrays, arr => arr[index]);
    });
}

// 使用示例
const mergedArray = horizontalConcatLodash(H, E, F);

逻辑说明：用_.map遍历第一个数组的每一行，对每个索引位置，通过_.flatMap取出所有数组对应索引的行并扁平化合并，实现横向拼接效果。

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