Question

我需要一个解释，就像在这个构造函数的gridFull状态中所做的那样。作为javascript的新手，我无法得到这行代码。

constructor() {
        super();
        this.speed = 100;
        this.rows = 30;
        this.cols = 50;

        this.state = {
            generation: 0,
            gridFull: Array(this.rows).fill().map(() => Array(this.cols).fill(false))// this line of code is unclear to me
        }

Answer 1

让我们打破界限：

Array(this.rows)

这将创建一个this.rows行的数组。在这种情况下，30。

.fill()

使用undefined值（more info on fill function）

填充数组

.map(callbackFunction)

返回一个新数组，每个值都由函数转换。由于您有一个undefined数组，因此您可以像调用以下callbackFunction(undefined)一样调用该函数。

现在回调函数：

() => Array(this.cols).fill(false);

此函数不带参数（因此()），并返回一个this.cols大小（即50）的数组，都包含false。

TL; DR：因此，您实际上是在每个元素上创建一个填充false的30x50矩阵。

编辑：

解释箭头功能：

(list-of-parameters) => (function block | return value)

为了解释使用示例，我们可以将function one() { return 1; }转换为() => 1;。

或function times(a, b) { return a * b;}进入(a, b) => a * b;

或另一个：

let x = 0;
function foo(y) {
  const returnValue = (x++) * y;
  return returnValue;
}

到

let x = 0;
const foo = (y) => {
  const returnValue = (x++) * y;
  return returnValue;
}

EDIT2：

实现相同结果的更多方法：

let result = Array(rowCount).fill();
for (let i = 0; I < rowCount; i++) {
  result[i] = Array(colCount).fill(false);
}

另：

const line = Array(colCount).fill(false);
const result = Array(rowCount).fill().map(() => [...line]);

另一个：

const line = Array(colCount).fill(false);
const result = [];
for (let idx = 0; idx < rowCount; idx++) {
  result.push([...line]);
}

或者您可以创建自己的＆＃34;矩阵创建者＆＃34;：

function matrix(row, col) {
  const data = Array(row * col).fill(false);

  const findIdx = (x, y) => y * col + x;

  return {
    get: (x, y) => data[findIdx(x,y)],
    set: (x, y, value) => {
      data[findIdx(x,y)] = value
      return data[findIdx(x,y);
    },
  };
}

在reactjs

1 个答案: