【React】js array的map方法总结

在写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是可选参数

本例

1. 将history映射到moves去。

2. 映射方法，是一个箭头函数，也即map只提供了一个参数，即前文参数中必选的function参数。

3. 在function参数中，有两个参数，一个是step（即currentValue，必选，当前元素的值），一个是move（即index，可选，当前元素的索引值，意思是游戏的第几个movement）

4. 渲染li，用move作为key，li中是button点击调用jumpTo时间回到历史步骤，button中的内容是desc，desc用三目运算符，如果是下棋的第一步则显示’Go to game start’，否则显示’Go to move #’ + move 。

补充

1. map不会对空数组进行检测
2. map不会改变原始数组
3. 箭头函数只包含一个表达式，花括号和return可以省略
4. 箭头函数包含多条语句，花括号和return都不能省略
5. map是该数组中每个元素，逐一调用一次提供的函数后，的返回值
6. 如果map中某个元素，调用提供的方法却没有return，则该元素映射位置为undefined

参考

文档：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://www.runoob.com/jsref/jsref-map.html

React代码出处：

https://react.docschina.org/tutorial/tutorial.html#why-immutability-is-important

其他博客：

https://www.jianshu.com/p/53032fc0909a

https://blog.csdn.net/liminwang0311/article/details/86480829