让前 3 个元素在 React 中循环遍历数组的最佳方法？

Question

让前 3 个元素循环通过该 React 数组的最佳方法是什么？

const elements = [
  {id:1, label:"1", value:1},
  {id:2, label:"2", value:2},
  {id:3, label:"3", value:3},
  {id:4, label:"4", value:4},
  {id:5, label:"3", value:5},
  {id:6, label:"3", value:6}
];

Answer 1

如果可以改变原始数组，

 const elements = [ {id:1, label:"1", value:1}, {id:2, label:"2", value:2}, {id:3, label:"3", value:3}, {id:4, label:"4", value:4}, {id:5, label:"3", value:5}, {id:6, label:"3", value:6} ]; elements.length = 3; console.log(elements);

如果可以改变原始数组，但不仅仅是前 3 个或前 n 个元素，您可能想要选择 window，拼接会给您更多的灵活性。 更多细节

 const elements = [ {id:1, label:"1", value:1}, {id:2, label:"2", value:2}, {id:3, label:"3", value:3}, {id:4, label:"4", value:4}, {id:5, label:"3", value:5}, {id:6, label:"3", value:6} ]; elements.splice(3); console.log(elements);

如果不需要改变原始数组，那么slice是你的朋友。 更多细节

 const elements = [ {id:1, label:"1", value:1}, {id:2, label:"2", value:2}, {id:3, label:"3", value:3}, {id:4, label:"4", value:4}, {id:5, label:"3", value:5}, {id:6, label:"3", value:6} ]; const newElements = elements.slice(0, 3); console.log(newElements);

Answer 2

您的预设需要修复，因为它是 object 中的key: value对，而不是key=value 。

但是您可以使用.slice(start, length)来获得一定数量的结果：

 const elements = [{ id: 1, label: "1", value: 1 }, { id: 2, label: "2", value: 2 }, { id: 3, label: "3", value: 3 }, { id: 4, label: "4", value: 4 }, { id: 5, label: "3", value: 5 }, { id: 6, label: "3", value: 6 } ]; console.log(elements.slice(0,3));

Answer 3

你可以使用拼接 function

 const elements = [ {id:1, label:"1", value:1}, {id:2, label:"2", value:2}, {id:3, label:"3", value:3}, {id:4, label:"4", value:4}, {id:5, label:"3", value:5}, {id:6, label:"3", value:6} ] const first_tree=elements.splice(0,3) console.log(first_tree)

Answer 4

使用解构：

 const elements = [{id:1, label:"1", value:1},{id:2, label:"2", value:2},{id:3, label:"3", value:3},{id:4, label:"4", value:4},{id:5, label:"5", value:5},{id:6, label:"6", value:6}]; const [one, two, three] = elements; console.log(one, two, three);

或slice ：

{elements.slice(0, 3).map((item) => (
  <div key={item.id}>{item.label}</div>
))}