如何根据条件用项目填充二维数组

Question

一些背景

\n

我正在开发一个小型项目，以构建一个 32 x 32 的数组，其中包含各种数字，代表小地图的图块。然后，这些图块将以视觉方式表示，以创建看似随机的地图生成器，而我仅在 JS 中执行此操作，作为强化我已经了解的数组的方法。

\n

对于其他上下文：我希望有一些默认值，例如整个数组中的 3 x 3 行保持不变（空白/可步行），以保证地图的可步行区域。

\n

问题

\n

我目前已经让它根据默认值填充数组：

\n

\r\n

\r\n

function createAndFillTwoDArray({\n  rows,\n  columns,\n  defaultValue\n}) {\n  return Array.from({\n      length: rows\n    }, () =>\n    Array.from({\n      length: columns\n    }, () => defaultValue)\n  );\n}\n\nconst values = createAndFillTwoDArray({\n  rows: 32,\n  columns: 32,\n  defaultValue: "\xe2\x9c\x94\xef\xb8\x8f",\n});\n\n// This populates the array into HTML, and should not effect the actual generation\nconst tbody = document.querySelector("tbody");\n\nfor (let i = 0; i < values.length; i++) {\n  const tr = document.createElement("tr");\n  const fields = values[i];\n\n  for (let j = 0; j < fields.length; j++) {\n    const field = fields[j];\n    const td = document.createElement("td");\n\n    td.textContent = field;\n\n    tr.appendChild(td);\n  }\n\n  tbody.appendChild(tr);\n}

\r\n

\r\n

\r\n

\n

从这里开始我们的问题是，我试图弄清楚如何传入一个函数或对象，该函数或对象将允许我填充每个数组，但无法从 createAndFillTwoDArray 函数的范围之外引用该数组

\n

我尝试了几种方法，首先我尝试从箭头函数中删除默认值，并在其中添加 if else 循环语句，然后尝试将默认值设置为对象。

\n

这两个都不起作用，从那里我开始尝试在函数内部和数组创建之外创建它，这也不起作用并导致我的实时服务器崩溃，这是意料之外的。

\n

\r\n

\r\n

function createAndFillTwoDArray({\n  rows,\n  columns\n}) {\n  const arr = Array.from({\n      length: rows\n    }, () =>\n    Array.from({\n      length: columns\n    }, () => {})\n  );\n  for (let i = 0; i < arr.length; i++) {\n    arr.push("\xe2\x9c\x94\xef\xb8\x8f");\n  }\n  return arr;\n}\n\nconst values = createAndFillTwoDArray({\n  rows: 32,\n  columns: 32,\n});

\r\n

\r\n

\r\n

\n

Answer 1

如果您希望默认值是一个函数而不是单个值，只需在创建函数中调用它即可。

\n

由于Array.from()将索引传递给填充函数，因此我将其传递给创建函数。

\n

\r\n

\r\n

function createAndFillTwoDArray({\n  rows,\n  columns,\n  defaultFunc\n}) {\n  return Array.from({\n      length: rows\n    }, (_, row) =>\n    Array.from({\n      length: columns\n    }, (_, col) => defaultFunc(row, col))\n  );\n}\n\nconst values = createAndFillTwoDArray({\n  rows: 32,\n  columns: 32,\n  defaultFunc: (x, y) => x == y ? "" : "\xe2\x9c\x94\xef\xb8\x8f",\n});\n\n// This populates the array into HTML, and should not effect the actual generation\nconst tbody = document.querySelector("tbody");\n\nfor (let i = 0; i < values.length; i++) {\n  const tr = document.createElement("tr");\n  const fields = values[i];\n\n  for (let j = 0; j < fields.length; j++) {\n    const field = fields[j];\n    const td = document.createElement("td");\n\n    td.textContent = field;\n\n    tr.appendChild(td);\n  }\n\n  tbody.appendChild(tr);\n}

\r\n

<table>\n  <tbody>\n  </tbody>\n</table>

\r\n

\r\n

\r\n

\n