循环遍历数组JavaScript中的前3项（react）[重复]

Question

例如，我有5项：

const items = [
{id: 1, name: 'book', price: 50},
{id: 2, name: 'phone', price: 450},
{id: 3, name: 'fish', price: 80},
{id: 4, name: 'apple', price: 5},
{id: 5, name: 'pen', price: 2},
]

当我们使用这样的映射方法时：

{items.map( item => (
 <div> {item.name} {item.price} </div>
)}

我们显示所有的项目；

但我只想展示其中的3个项目

我怎么能做到呢？（使用map方法或for方法或其他方法）

Answer 1

你可以用Array.slice

{items.slice(0,3).map( item => (
 <div> {item.name} {item.price} </div>
)}

js lang-js prettyprint-override">const items = [
{id: 1, name: 'book', price: 50},
{id: 2, name: 'phone', price: 450},
{id: 3, name: 'fish', price: 80},
{id: 4, name: 'apple', price: 5},
{id: 5, name: 'pen', price: 2},
]

const first3Items = items.slice(0,3);
console.log(first3Items);