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

Question

一些背景知识

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

问题

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

function createAndFillTwoDArray({
  rows,
  columns,
  defaultValue
}) {
  return Array.from({
      length: rows
    }, () =>
    Array.from({
      length: columns
    }, () => defaultValue)
  );
}

const values = createAndFillTwoDArray({
  rows: 32,
  columns: 32,
  defaultValue: "✔️",
});

// This populates the array into HTML, and should not effect the actual generation
const tbody = document.querySelector("tbody");

for (let i = 0; i < values.length; i++) {
  const tr = document.createElement("tr");
  const fields = values[i];

  for (let j = 0; j < fields.length; j++) {
    const field = fields[j];
    const td = document.createElement("td");

    td.textContent = field;

    tr.appendChild(td);
  }

  tbody.appendChild(tr);
}

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

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

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

function createAndFillTwoDArray({
  rows,
  columns
}) {
  const arr = Array.from({
      length: rows
    }, () =>
    Array.from({
      length: columns
    }, () => {})
  );
  for (let i = 0; i < arr.length; i++) {
    arr.push("✔️");
  }
  return arr;
}

const values = createAndFillTwoDArray({
  rows: 32,
  columns: 32,
});

Answer 1

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

由于

Array.from()

将索引传递给填充函数，我将其传递给创建函数。

function createAndFillTwoDArray({
  rows,
  columns,
  defaultFunc
}) {
  return Array.from({
      length: rows
    }, (_, row) =>
    Array.from({
      length: columns
    }, (_, col) => defaultFunc(row, col))
  );
}

const values = createAndFillTwoDArray({
  rows: 32,
  columns: 32,
  defaultFunc: (x, y) => x == y ? "" : "✔️",
});

// This populates the array into HTML, and should not effect the actual generation
const tbody = document.querySelector("tbody");

for (let i = 0; i < values.length; i++) {
  const tr = document.createElement("tr");
  const fields = values[i];

  for (let j = 0; j < fields.length; j++) {
    const field = fields[j];
    const td = document.createElement("td");

    td.textContent = field;

    tr.appendChild(td);
  }

  tbody.appendChild(tr);
}

<table>
  <tbody>
  </tbody>
</table>