React 井字游戏教程答案

【问题标题】：React Tic Tac Toe TutorialReact 井字游戏教程
【发布时间】：2017-11-21 21:46:10
【问题描述】：

我正在学习基本的 React 'tic tac toe tutorial' 并且理解了大部分发生的事情。

但是当我进入第二部分时，我遇到了一些我不太理解的东西，我的朋友也无法真正告诉我它是如何工作的。

井字游戏有一个历史变量。这个变量包含一个方阵数组。（因此，由正方形组成的比赛场地的实例）。

history = [{
squares: [
  null, null, null,
  null, null, null,
  null, null, null,
]},{
squares: [
  null, null, null,
  null, 'X', null,
  null, null, null,
]},// ...]

现在在教程中编写了这段代码：

    const moves = history.map((step, move) => {
  const desc = move ?
    'Go to move #' + move :
    'Go to game start';
  return (
    <li>
      <button onClick={() => this.jumpTo(move)}>{desc}</button>
    </li>
  );
});

我知道它的作用，但我的问题是 step 和 move 参数从何而来？在这个例子中，step 和 move 之间到底有什么区别？一个参数不够吗？我尝试更仔细地查看 map 函数，但它并没有让我对这个具体的例子有任何清晰的认识！

完整代码链接： https://codepen.io/gaearon/pen/gWWZgR?editors=0010

完整教程的链接（存储历史章节介绍了此代码）： https://reactjs.org/tutorial/tutorial.html

谢谢！

【问题讨论】：

您阅读过Array#map 文档吗？ map 回调函数最多需要三个参数，function callback(currentValue, index, array) - 所以，step 是 currentValue，move 是 index

标签： javascript reactjs

【解决方案1】：

W3schools 文档here 对我来说更容易阅读。 Es6 引入了箭头函数，所以语法看起来有点不同，但实际上是一样的。

map 函数最多可以为currentValue、index 和array 使用三个参数。步进和移动参数与currentValue 和index 对齐。由于没有删除第三个参数数组。

【讨论】：

为了进一步阐明这一点，每次 map 函数迭代 step 参数将从元素 0 开始移动到历史数组中的下一个元素，并且移动索引将从整数 1 开始递增 1。

【解决方案2】：

“步骤”是表示历史数组中特定条目的数组条目。 “move”是指向“step”的数组的索引。换句话说，它们形成了一对使得我们有

历史[移动] = 步

在“井字游戏教程”的上下文中。它们来自 JavaScript 中数组的 map 方法的指定语法。

这就是为什么在使用数组映射方法时，即使在代码中没有使用“step”，也必须将“step”和“move”都作为参数放在那里。不过，您可以为它们命名。

通常，您需要使用“步骤”进行有用的处理。但是，在这种特定情况下，只有索引信息“move”用于不同地标记开始播放，没有使用“step”。

【讨论】：