react的map遍历

最新推荐文章于 2025-10-27 19:21:17 发布

原创最新推荐文章于 2025-10-27 19:21:17 发布 · 1w 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

react

本文探讨了JavaScript中的Map结构，强调在React开发中如何利用Map进行遍历操作。Map不同于普通的对象，它允许使用任何类型的值作为键，并提供了如set、get、has、delete及多种遍历方法来高效地管理数据。

JavaScript的对象（Object），本质上是键值对的集合（Hash结构），但是只能用字符串当作键

<ul>
    {
        this.state.reward.map((cont,index) =>{
            return (
                <li  key={index}>
                    <div className="text1">{cont.num}</div>
                    <div className="text2">{cont.username}</div>
                    <div className="text3 text-right">{cont.time}</div>
                </li>
            )})
    }
</ul>

实例的属性

size属性返回Map结构的成员总数

实例的方法

操作方式
- set(key, value)：设置key所对应的键值，然后返回整个Map结构(本身)
- get(key)：读取key对应的键值
- has(key)：返回一个布尔值，表示某个键是否在Map数据结构中
- delete(key)：删除某个键，返回布尔值
- clear()：清除所有成员，没有返回值
遍历方法
- keys()：返回键名的遍历器
- values()：返回键值的遍历器
- entries()：返回所有成员的遍历器
- forEach()：遍历Map的所有成员