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.