仅映射数组中的一组项目

Question

我正在尝试在我的网站主页上构建一个小型预览部分，显示产品页面的前 3 个项目，其中所有项目都位于其中，并具有如下所示的地图功能。

{goldendoodles.map((goldendoodles) => (
       
          <Card style={{width: '20rem'}}>
          <img className="cardimage" src={goldendoodles.image} alt={goldendoodles.name} />
          <h1>{goldendoodles.name}</h1>
          <p>{goldendoodles.price}</p>
        
        
        <h1>{goldendoodles.description}</h1>
          </Card>
      ))}
    ```

目前它正在按预期映射所有项目，
我想知道是否有一种方法可以仅映射数组中的一定数量的项目，而不是整个项目？感谢您的时间。

Answer 1

对于前 3 项，您可以使用.slice()( doc )

该slice()方法将数组的一部分的浅表副本返回到从startto end（end不包括在内）中选择的新数组对象，其中start和end表示该数组中项目的索引

{ goldendoodles.slice(0, 3).map((goldendoodles) => (...) }