如何从数组中获取前N个元素

Question

我正在使用Javascript(ES6) /FaceBook react工作，尝试获取一个大小不定的数组中的前3个元素。我想要做的是相当于Linq take(n)。

在我的Jsx文件中，我有以下内容:

var items = list.map(i => {
  return (
    <myview item={i} key={i.id} />
  );
});

然后我尝试获取前三个项目

  var map = new Map(list);
    map.size = 3;
    var items = map(i => {
      return (<SpotlightLandingGlobalInboxItem item={i} key={i.id} />);
    });

这不起作用，因为 map 没有 set 函数。下一步我该尝试什么？

- user1526912

Answer 1

获取数组的前 n 个元素，请使用

const slicedArray = array.slice(0, n);

- Oriol

---

请注意，JavaScript 数组的 slice 函数返回数组的浅拷贝，并不修改原始数组。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice - Danny Harding

如果n大于size，会报错吗？ - Rishabh876

不，它并不会。对于array.slice(0, n);，它返回的是[0, min(n, array.length))。 - Morgoth

我 echo @Rishabh876。另一个被提升的答案是错误的，以后可能很难调试。 - charlie6411

@Morgoth - 我有点困惑 -- 你是在说这个方法不正确，因为当数组少于3个元素时，它不会返回3个元素吗？ - ashleedawg

取决于你对“正确”的定义。如果 array 少于3个元素并且你对其进行3个元素的切片，则会返回数组中的所有元素（即小于3个）。这是非常明智的行为，但如果这对你的应用程序没有意义，你可能需要先检查数组的长度。 - Morgoth

Answer 2

我相信你寻找的是：

// ...inside the render() function

var size = 3;
var items = list.slice(0, size).map(i => {
    return <myview item={i} key={i.id} />
});                       
return (
  <div>
    {items}
  </div>   
)

- Patrick Shaughnessy

Answer 3

arr.length = n

这可能令人惊讶，但数组的length属性不仅用于获取数组元素的数量，而且还可写，并可用于设置数组的长度。这将更改数组。MDN链接。如果您不关心不变性或者不想分配内存，例如对于游戏来说，这将是最快的方法。要清空一个数组。

arr.length = 0

- Pawel

---

如果数组长度小于N，这将扩展数组。 - Oldrich Svec

Pawel的答案似乎是在资源紧张的环境下最好的选择，当剩余元素可以被丢弃时。考虑到数组已经较小的情况，这是一个小的改进：if (arr.length > n) arr.length = n - Manuel de la Iglesia Campos

Answer 4

使用slice方法

JavaScript的slice()方法会从一个数组中选取从起始索引到结束索引之间的元素，并将其生成一个新的数组对象。原始数组不会被修改。

语法：slice(start, end)

假设我们有一个包含7个元素的数组[5,10,15,20,25,30,35]，我们想要从该数组中获取前5个元素：

let array = [5,10,15,20,25,30,35]
let newArray = array.slice(0,5)

console.log(newArray)

- Rahul singh

---

请注意，您将收到数组中从索引开始到索引结束-1的值。这很好地允许循环。 - alex

Answer 5

您可以使用数组的index进行过滤。

var months = ['Jan', 'March', 'April', 'June'];
months = months.filter((month,idx) => idx < 2)
console.log(months);

- Freddy

---

仅使用.filter不是一个好选择，至少如果输入数组可能很长的话就不是。.filter会检查数组的每个元素是否符合条件。.slice不会这样做，它只会提取前n个元素，然后停止处理 - 这绝对是您在处理长列表时想要的结果。（正如@elQueFaltaba在另一个答案的评论中所说。） - MikeBeaton

Answer 6

不要尝试使用map函数来做那件事。Map函数应该用于将一个东西的值映射到另一个东西上，当输入和输出数量相匹配时。

在这种情况下，请使用也可用于数组的filter函数。当您想要有选择地获取符合某些条件的值时，可以使用筛选函数。然后可以像这样编写您的代码

var items = list
             .filter((i, index) => (index < 3))
             .map((i, index) => {
                   return (
                     <myview item={i} key={i.id} />
                   );
              });

- sandeep

---

总体而言，您是正确的，但从语义上讲，如果您采用这种方法，应该使用过滤器来首先过滤元素集，然后再映射过滤后的集合。 - Chris

筛选函数会遍历数组中的所有元素，而切片则不会，因此使用切片在性能方面更好，对吗？ - elQueFaltaba

Answer 7

尝试使用以下代码从列表中获取前 n 个元素：

const slicedList = list.slice(0, n);

Example:

const list = [1,2,3,4,5]
console.log(list.slice(0, 3)) // Should return [1,2,3] 
console.log(list.slice(0, 10)) // Returns [1,2,3,4,5] since this is all we have in 1st 10 elements

- Anurag

Answer 8

[1,2,3,4,5,6,7,8,8].slice(0, 3) = 返回前三个元素。

答案：[1,2,3]

工作原理：

slice() 方法返回一个新数组对象，该对象是从 start 到 end（不包括 end）的原数组的浅拷贝。start 和 end 表示该数组中的项目索引。原始数组不会被修改。

- Frank HN

Answer 9

下面的方法适用于我。

array.slice( where_to_start_deleting, array.length )

这里有一个例子

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.slice(2, fruits.length);
//Banana,Orange  ->These first two we get as resultant

- FlyingSnowGhost

---

第一个例子中使用了 slice，而在第二个例子中使用了 splice。 - Veslav

这也是错误的。从这里得到的结果是["Apple", "Mango"]。切片的第一部分不是“从哪里开始删除”，而是从哪里开始进行切片。它不会修改原始数组，也不会删除任何东西。 - Redmega

这是不正确的。slice 返回一个新的已切片项目数组。应该是 fruits.slice(0,2)，其中 0 是起始索引，2 是要获取的数字。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice - denski

Answer 10

使用lodash中的take函数，您可以按照以下步骤实现：

_.take([1, 2, 3]);
// => [1]
 
_.take([1, 2, 3], 2);
// => [1, 2]
 
_.take([1, 2, 3], 5);
// => [1, 2, 3]
 
_.take([1, 2, 3], 0);
// => []

- nurgasemetey