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

【问题标题】：Best way to get the first 3 elements looping through an array in React?在 React 中让前 3 个元素循环遍历数组的最佳方法？
【发布时间】：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?

标签： javascript reactjs

【解决方案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>
))}

【讨论】：