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

Posted 2023-02-21

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

【英文标题】：Best way to get the first 3 elements looping through an array in React?

【发布时间】：2021-07-08 22:57:00

【问题描述】：

让前 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
];

【问题讨论】：

数组方法，理想情况下。

这能回答你的问题吗？ How to get first N number of elements from an array

如果以下答案有用，请单击其左侧的点赞按钮 (▲)。如果有人回答了您的问题，请单击复选标记 (✓) 接受它（一旦系统允许）。这样其他人就知道你已经（充分地）得到了帮助。另见What should I do when someone answers my question?

【参考方案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 个元素，您可能想要选择一个窗口，splice 会给您更多的灵活性。 More details

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 是你的朋友。 More details

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);

【参考方案2】：

您的预设需要修复，因为它是对象中的 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));

【参考方案3】：

你可以使用拼接功能

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)

【参考方案4】：

使用destructuring:

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>
))