1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <script src="../js/react.development.js"></script> 8 <script src="../js/react-dom.development.js"></script> 9 <script src="../js/babel.min.js"></script> 10 </head> 11 <body> 12 13 <div id="box"></div> 14 15 <script type="text/babel"> 16 //动态展示列表数据 17 var lis=['jQuery','zeptoo','Angular','react','vue','ajax']; 18 var vul=( 19 <ul> 20 { 21 lis.map( (li,index,lis) => <li key={index}> {li} </li> ) //使用map方法将一个数据的数组转换为一个标签的数组 22 } 23 </ul> 24 ) 25 ReactDOM.render(vul, document.getElementById("box")); 26 27 </script> 28 </body> 29 </html>
数组的map方法
1，map()方法返回一个新数组，新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。
2，map()方法按照原始数组元素顺序依次处理元素。
3，map()中函数的作用是对数组中的每一个元素进行处理，返回新的元素。
4，语法：array.map(function(item,index,arr[]));
5,map是数组中的方法，有一个参数，参数是一个函数，函数中有三个参数。
参数1，item必须，当前元素的值；参数2，index，可选，当前元素在数组中的索引值；参数3，arr可选，当前元素属于的数组对象
