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


383

我正在使用Javascript(ES6)/ FaceBook做出反应,并尝试获取大小变化的数组的前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} />);
    });

这不起作用,因为地图没有设置功能。

你能帮忙吗?


4
也许我误解了这个问题,但是为什么不使用类似的东西list.slice(0, 3);然后进行迭代呢?
杰西·克纳汉

为什么要使用地图?如果我正确理解了您的要求,则可以使用slice取前n个元素。
阿布舍克·Ja那

如果老师告诉要用地图?:)很抱歉,如果这是一个正当的问题,但感觉就像是一项家庭作业。
diynevala '16

请考虑将接受的答案更改为对公众更有用的答案
Brian Webster,

Answers:


401

我相信您正在寻找的是:

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


30

这可能令人惊讶,但是length数组的属性不仅用于获取数组元素的数量,而且还是可写的,并且可以用于设置数组的长度MDN链接。这将使数组变异。

如果不再需要当前数组,并且您不关心不变性或不想分配内存,那么对于游戏来说,最快的方法是

arr.length = n

清空数组

arr.length = 0

您确定这比快arr = []吗?
GrayedFox

3
这样做的好处是避免了内存分配。在运行时初始化新对象(即游戏)会触发垃圾收集器和垃圾。
Pawel

值得一提的是,这将使数组发生变化,其中slice将返回浅表副本。如果您需要利用刚被永久截断的项目,这将有很大的不同。
Ynot

1
@是的,我会让它更加明显
Pawel

4
这也将展开数组,如果它小于N
Oldrich斯韦克

13

请勿尝试使用地图功能执行此操作。映射函数应用于将值从一件事映射到另一件事。当输入输出数量匹配时。

在这种情况下,请使用阵列上也可用的过滤器功能。当您要选择取某些标准的值时,可以使用过滤器功能。然后,您可以像这样编写代码

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

1
您总体上是正确的,但从语义上讲,应该使用filter 首先过滤掉元素集,然后,如果采用这种方法,则应映射过滤掉的元素集。
克里斯(Chris)2007年

8
filter函数将遍历数组中的所有元素,而slice则不会,所以使用slice会更好,对吗?
elQueFaltaba

11

您可以使用index数组过滤。

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


2
.filter靠它本身不是一个好选择,至少在输入数组很长的情况下不是这样。.filter遍历数组的每个元素,检查其条件。.slice不会这样做,但是只会提取前n个元素,然后停止处理-对于长列表,这绝对是您想要的。(正如@elQueFaltaba在对另一个答案的评论中所说的那样。)
MikeBeaton

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

4
在第一个示例中使用,slice但是在第二个示例中使用splice
Veslav

3
这也是错误的。您将从中得到["Apple", "Mango"]。切片的第一部分不是“从哪里开始删除”,而是从哪里开始切片。它不会修改原始数组,也不会删除任何内容。
天使约瑟夫·皮斯科拉


0

使用过滤器

不是最佳实践,而是另一种方法

const cutArrByN = arr.filter((item, idx) => idx < n);

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.