Jak uzyskać pierwszą N liczbę elementów z tablicy


383

Pracuję z Javascript (ES6) / FaceBook reaguję i próbuję uzyskać pierwsze 3 elementy tablicy o różnej wielkości. Chciałbym zrobić odpowiednik Linq weź (n).

W moim pliku Jsx mam następujące elementy:

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

Następnie, aby zdobyć pierwsze 3 przedmioty, które próbowałem

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

To nie działało, ponieważ mapa nie ma ustawionej funkcji.

Czy możesz mi pomóc?


4
Może nie rozumiem problemu, ale dlaczego nie użyć czegoś takiego, list.slice(0, 3);a następnie powtórzyć?
Jesse Kernaghan

Dlaczego chcesz korzystać z mapy? Jeśli dobrze rozumiem twoje wymagania, możesz po prostu użyć wycinka, aby wziąć pierwsze n elementów.
Abhishek Jain,

Jeśli nauczyciel kazał korzystać z mapy? :) Przepraszam, jeśli jest to uzasadnione pytanie, ale po prostu czułem się jak zadanie domowe.
diynevala,

Proszę rozważyć zmianę zaakceptowanej odpowiedzi na tę, która okazała się bardziej użyteczna dla opinii publicznej
Brian Webster

Odpowiedzi:


401

Wierzę, że szukasz:

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

Może to być zaskakujące, ale lengthwłaściwość tablicy służy nie tylko do uzyskania liczby elementów tablicy, ale jest także zapisywalna i może być używana do ustawiania długości łącza MDN tablicy . Spowoduje to mutację tablicy.

Jeśli bieżąca tablica nie jest już potrzebna i nie obchodzi Cię niezmienność lub nie chcesz przydzielać pamięci, tj. W przypadku gry najszybszym sposobem jest

arr.length = n

aby opróżnić tablicę

arr.length = 0

jesteś pewien, że to jest szybsze niż arr = []?
GrayedFox

3
Korzyścią tutaj jest unikanie przydziału pamięci. Inicjowanie nowych obiektów w czasie wykonywania, tj. W grach, powoduje wyrzucanie śmieci i jank.
Paweł

Warto wspomnieć, że to zmutuje tablicę, w której plaster zwróci płytką kopię. Staje się to dużą różnicą, jeśli musisz skorzystać z przedmiotów, które właśnie na stałe okroiłeś.
'18

1
@Nie jest ok, sprawię, że będzie to trochę bardziej oczywiste
Paweł

4
Rozszerzy to również tablicę, jeśli jest mniejsza niż N
Oldrich Svec

13

Nie próbuj tego robić za pomocą funkcji mapy. Funkcja mapowania powinna być używana do mapowania wartości z jednej rzeczy na drugą. Gdy liczba wejść i wyjść jest zgodna.

W takim przypadku użyj funkcji filtrowania, która jest również dostępna w tablicy. Funkcja filtrowania jest używana, gdy chcesz selektywnie przyjmować wartości przetwarzając określone kryteria. Następnie możesz napisać swój kod jak

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

1
Ogólnie masz rację, ale semantycznie powinieneś użyć filtru, aby najpierw przefiltrować zestaw elementów, a następnie odwzorować przefiltrowany zestaw, jeśli przyjmujesz takie podejście.
Chris

8
Funkcja filtrowania przejdzie przez wszystkie elementy w tablicy, podczas gdy plasterek nie, więc lepiej jest użyć wycinka, prawda?
elQueFaltaba

11

Możesz filtrować za pomocą indextablicy.

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


2
.filtersam w sobie nie jest dobrym wyborem, przynajmniej jeśli tablica wejściowa może być długa. .filterprzechodzi przez każdy element tablicy sprawdzając jej stan. .slicenie zrobiłby tego, ale po prostu wyodrębniłby pierwsze n elementów, a następnie zatrzymałby przetwarzanie - co na pewno byłoby tym, czego oczekujesz od długiej listy. (Jak już powiedział @elQueFaltaba w komentarzach do innej odpowiedzi).
MikeBeaton

9

Poniższe działało dla mnie.

array.slice( where_to_start_deleting, array.length )

Oto przykład

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

4
W pierwszym przykładzie używasz, sliceale w drugim używasz splice.
Veslav

3
To też jest złe. Dostaniesz ["Apple", "Mango"]z tego. Pierwsza część wycinka to nie „od czego zacząć usuwanie”, ale od której zaczyna się wycinek. Nie modyfikuje oryginalnej tablicy i niczego nie usuwa.
Angel Joseph Piscola


0

Użyj filtru

Nie najlepsza praktyka, ale inny sposób

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.