所属分类：web前端开发
在react中，map方法用于遍历和显示组件的类似对象列表；map方法并不是react特有的，可以在任何数组上调用标准的JavaScript函数，map方法通过对调用数组的每个元素调用提供的函数来创建数组。
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。
map是一种数据集合类型，其中数据以对的形式存储。它包含一个唯一的键，存储在映射中的值必须映射到键。我们不能在map()中存储重复的对，这是因为每个存储的键都是惟一的，它主要用于快速搜索和查找数据。
在React里map方法用于遍历和显示组件的类似对象列表，map不是React特有的，相反，它是可以在任何数组上调用的标准JavaScript函数。map()方法通过对调用数组中的每个元素调用提供的函数来创建新数组。
例子
在给定的示例中，map()函数接受一个数字数组并将其值加倍，我们将map()返回的新数组分配给变量doubleValue并记录它。
微博登录
QQ登录var numbers = [1, 2, 3, 4, 5];
const doubleValue = numbers.map((number)=>{
return (number * 2);
});
console.log(doubleValue);登录后复制在React中，map()方法用于:
1. 遍历列表元素。
例子
import React from 'react';
import ReactDOM from 'react-dom';
function NameList(props) {
const myLists = props.myLists;
const listItems = myLists.map((myList) =>
<li>{myList}</li>
);
return (
<div>
<h2>React Map例子</h2>
<ul>{listItems}</ul>
</div>
);
}
const myLists = ['A', 'B', 'C', 'D', 'D'];
ReactDOM.render(
<NameList myLists={myLists} />,
document.getElementById('app')
);
export default App;登录后复制2. 用键遍历列表元素。
例子
import React from 'react';
import ReactDOM from 'react-dom';
function ListItem(props) {
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
);
return (
<div>
<h2>React Map例子</h2>
<ul> {listItems} </ul>
</div>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('app')
);登录后复制【相关推荐：javascript视频教程、web前端】
以上就是react中map方法怎么用的详细内容，更多请关注zzsucai.com其它相关文章！
