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

const first_tree=elements.splice(0,3)
console.log(first_tree)

Answer 2

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

但是您可以使用。切片（开始，长度）用于获得一定数量的结果：

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

如果可以改变原始数组，

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