JavaScript中的map函数结合React框架

js的map函数

话不多说，直接上代码

//创建数组
const myArry =[1,2,3,4,5,6]
//map中的箭头函数的功能是求数组中元素的平方
console.log("数组求平方"+myArry.map((item)=>(item*item)))
//原数组不会被改变
console.log("原数组"+myArry)

上述的代码中map函数的作用是循环遍历数组myArry中的元素，其中的箭头函数 （箭头函数传送门） 的作用是返回数组元素item的平方。（item可以认为是循环变量，依次为数组中的元素值）

实在看不懂的换下面代码

const myArry =[1,2,3,4,5,6]
 //求平方函数
const SQ = (item)=>(item*item)
//注意这里map中只写函数名字就行
console.log("数组求平方"+myArry.map(SQ))
console.log("原数组"+myArry)

另一种格式

const myArry =[1,2,3,4,5,6]
console.log("数组求平方"+myArry.map(function (item) {
   return item*item
}))
console.log("原数组"+myArry)

相比起来是不是箭头函数更省代码呢？

React中使用map函数

当然理解了上面的讲述，下面的应该容易理解一些，先来一个较简单的案例分析

render()
{ return(
	    <div className="row">
	        {
	            users.map((user,index)=>(
	                    <div className="card" key={index}>
	                    <a href={user.url} target="_blank">
	                        <img src={user.photo}
	                             style={{width: 100}}/>
	                    </a>
	                    <p className="card-text">{user.name}</p>
	                </div>
	            ))
	        }
	    </div>
	)
}

上面的代码中组件渲染的方法render中users是用户提前定义好的一个数组

//这里只是举个例子
users =[{url:xxx,photo:xxx,name:xxx},{url:xxx,photo:xxx,name:xxx},}]

箭头函数中的参数有两个值，一个是对应的元素，一个是索引，箭头函数返回值是一个div,div的key值是index，使用箭头函数时需要一个唯一标识index （这个必须有，不然会有警告，箭头函数中的参数是一一对应的，最好固定格式就不要颠倒了） div中的a标签的链接是数组子元素的url, img地址是数组子元素的photo,p标签的内容是数组子元素的name。

执行完之后时这个样子，当时网络不太好图片就没有加载出来

再看一个比上面难一点的例子

下面的代码和上面的例子用的是同一个users 上面users中的数据就是从这里来的

//我们实现定义好一个空的users
//这里直接对空的users进行使用，定义过程就不写了
const users = result.items.map(item=>{
    return{name:item.login,url:item.html_url,photo:item.avatar_url}
})

我们直接把上面的 result.items 看成一个整体就行，直接理解为数组a，下面直接用数组a来解释。数组a里面的内容是这样的 数组a就是图片中的items

这里我们可以看到，数组a(items)中的元素是30个对象，但是我们只需要对象中的login、html_url和avatar_url，那我们就需要用到map函数，变量数组中的元素，返回一个新的对象，对象只包含我们需要的三个属性，其他的我们就不要了。这样解释之后是不就很清楚了呢？

文章若有错误还请指出，谢谢