React(JavaScript)如何仅遍历并展示数组的前3个元素

方案1：slice() + map() 组合（最推荐） #

Array.prototype.slice(start, end) 可以提取数组指定区间的元素，不会修改原数组，完全符合React不可变数据的要求，你只要提取前3项再遍历即可：

// 截取下标0到3的元素（不包含下标3，刚好是前3项）
{items.slice(0, 3).map(item => (
  <div key={item.id}> {item.name} {item.price} </div>
))}

注意：React中列表渲染必须给每个子项添加唯一key属性，这里直接用数组里的id字段即可，避免渲染异常。

方案2：map遍历中通过索引过滤 #

你也可以在map的回调里判断当前元素的索引，只渲染前3项，不过这种方式会遍历完整的数组，数组长度大的时候性能不如方案1：

{items.map((item, index) => {
  // 索引从0开始，小于3的才返回渲染内容
  if (index < 3) {
    return <div key={item.id}> {item.name} {item.price} </div>
  }
  return null
})}

方案3：for循环手动拼接渲染数组 #

如果你偏好使用for循环，可以先定义一个空数组存储需要渲染的元素，遍历前3项后插入到JSX中：

// 在组件返回JSX之前先处理
const renderItems = []
for (let i = 0; i < 3; i++) {
  const item = items[i]
  renderItems.push(<div key={item.id}> {item.name} {item.price} </div>)
}

// 渲染时直接使用即可
{renderItems}

内容的提问来源于stack exchange，提问作者Mehdi