本文已参与「新人创作礼」活动，一起开启掘金创作之路。
在写React官方教程的示例游戏（三连棋）时，对于map方法有些疑惑，解决之后做一个记录。
代码内容
const moves = history.map((step,move)=>{
const desc = move?
'Go to move #' + move :
'Go to game start';
return (
<li key={move}>
<button
onClick={()=>this.jumpTo(move)}
>
{desc}
</button>
</li>
)
})
功能描述： 这里要实现的是生成一个列表，展示下棋的历史步骤，点击列表调用jumpTo方法返回历史步骤。
问题描述：step是什么？move是什么？desc是什么？及map的相关用法？
效果图示
解决与总结
js中的数组拥有map()方法，一般将某数组映射为另一个数组。
参数
const array2 = array1.map(function(currentValue,index,arr),thisValue);
参数1： function(currentValue,index,arr)
function是必选参数，currentValue是function的必须按参数，index和arr是function的可选参数。
参数2：thisValue
thisValue是可选参数
本例
-
将history映射到moves去。
-
映射方法，是一个箭头函数，也即map只提供了一个参数，即前文参数中必选的function参数。
-
在function参数中，有两个参数，一个是step（即currentValue，必选，当前元素的值），一个是move（即index，可选，当前元素的索引值，意思是游戏的第几个movement）
-
渲染li，用move作为key，li中是button点击调用jumpTo时间回到历史步骤，button中的内容是desc，desc用三目运算符，如果是下棋的第一步则显示'Go to game start'，否则显示'Go to move #' + move 。
补充
- map不会对空数组进行检测
- map不会改变原始数组
- 箭头函数只包含一个表达式，花括号和return可以省略
- 箭头函数包含多条语句，花括号和return都不能省略
- map是该数组中每个元素，逐一调用一次提供的函数后，的返回值
- 如果map中某个元素，调用提供的方法却没有return，则该元素映射位置为undefined
参考
文档：
developer.mozilla.org/zh-CN/docs/…
React代码出处：
react.docschina.org/tutorial/tu…
其他博客：
