在 JavaScript 中将 2D 数组的 2D 网格展平为单个 2D 数组（功能上？）

Question

我有一个由 2D 数组（块）组成的 2D 数组（网格），用于我正在开发的游戏：

const c1 = [[1, 2],
            [3, 4]]

const c2 = [[5, 6],
            [7, 8]]

const c3 = [[9, 0],
            [1, 2]]

const c4 = [[3, 4],
            [5, 6]]

const grid_of_chunks = [[c1, c2],
                        [c3, c4]];

并且我想将 grid_of_chunks 减少/展平为：

[[1, 2, 5, 6],
 [3, 4, 7, 8],
 [9, 0, 3, 4],
 [1, 2, 5, 6]]

我已经能够实现功能性解决方案为此（在 Clojure 的 2 行中），但我正在努力将其翻译为函数式 JavaScript，并弥合两种语言的 map 语义之间的差距（JS map只接受一个数组，而 Clojure 的 map 接受许多集​​合...）。

据我所知：

function join_grid_of_chunks(gofc) {
    const joined_horiz = gofc.map(
        gofc_row => [].map.apply(gofc_row, [cs => [].concat.apply(cs)])
    );
    return [].concat.apply(joined_horiz);
}

编辑：Clojure 解决方案（适用于任意大小的方形网格中均匀大小的方形块）：

(defn join-grid-of-chunks [gofc]
  (let [joined (map #(apply map concat %) gofc)]
    (apply concat joined)))

Answer 1

使用 flatMap 的更通用解决方案是映射每个网格行的第一个块的索引。

function joinGridOfChunks(grid) {
    return grid.flatMap(row => row[0].map((_, i) => row.flatMap(chunk => chunk[i])))
}

使用 zip 函数（例如 lodash 中的函数） ），你可以把它写得稍微优雅一些​​：

function zip(...arrays) {
    return arrays[0].map((_, i) => arrays.map(arr => arr[i]))
}
function joinChunks(chunks) { // Horizontally join an array of chunks e.g. [[[1,2],[3,4]], [[5,6],[7,8]]] --> [[1,2,5,6],[3,4,7,8]]
    return zip(...chunks).map(row => row.flat())
}
console.log(gridOfChunks.flatMap(joinChunks));

zip加上map似乎很接近Clojure的带有多个集合的map。这应该适用于二维网格中任何形状的二维块。

Answer 2

这是我所拥有的：

const c1 = [[1, 2], [3, 4]];
const c2 = [[5, 6], [7, 8]];
const c3 = [[9, 0], [1, 2]];
const c4 = [[3, 4], [5, 6]];

const grid_of_chunks = [
  [c1, c2],
  [c3, c4]
];

function transform(input) {
  return input.flatMap(rows => {
    return rows.reduce((result, chunk) => {
      chunk.forEach((row, rowIndex) => {
        result[rowIndex] = result[rowIndex] || [];
        result[rowIndex].push(...row);
      });
      return result;
    }, []);
  });
}

console.log(transform(grid_of_chunks));

应该适用于 NxN 块和 MxM 网格