Como obter o primeiro número N de elementos de uma matriz

384

Estou trabalhando com o Javascript (ES6) / FaceBook reagindo e tentando obter os 3 primeiros elementos de uma matriz que varia em tamanho. Eu gostaria de fazer o equivalente ao Linq take (n).

No meu arquivo Jsx, tenho o seguinte:

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

Então, para obter os 3 primeiros itens que tentei

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

Isso não funcionou, pois o mapa não possui uma função definida.

Você pode por favor ajudar?

javascript reactjs user1526912
fonte
4
Talvez eu esteja entendendo mal o problema, mas por que não usar algo assim list.slice(0, 3);e depois repetir isso?
precisa saber é o seguinte
Por que você quer usar o mapa? Se eu entendi corretamente sua exigência, você pode usar a fatia para obter os primeiros n elementos.
Abhishek Jain
Se o professor disse para usar o mapa? :) Sinto muito se esta é uma pergunta legítima, mas parecia uma lição de casa.
precisa saber é
Por favor, considere mudar a resposta aceita para o que provou mais útil para o público
Brian Webster

Respostas:

401

Acredito que você está procurando: 

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

Para obter os primeiros nelementos de uma matriz, use

array.slice(0, n);
Oriol
fonte
58
Observe que a slicefunção nas matrizes retorna uma cópia superficial da matriz e não modifica a matriz original. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
Danny Harding
30

Isso pode ser surpreendente, mas a lengthpropriedade de uma matriz não é usada apenas para obter o número de elementos da matriz, mas também é gravável e pode ser usada para definir o link MDN de comprimento da matriz . Isso mudará a matriz.

Se o array atual não é mais necessário e você não se importa com imutabilidade ou não deseja alocar memória, ou seja, para um jogo, a maneira mais rápida é

arr.length = n

esvaziar uma matriz

arr.length = 0
Pawel
fonte
você tem certeza de que isso é mais rápido que arr = []?
GrayedFox
3
O benefício aqui é evitar a alocação de memória. A inicialização de novos objetos em tempo de execução, ie..e para jogos, está causando o coletor de lixo e o jank.
Pawel
Vale ressaltar que isso mudará a matriz, onde a fatia retornará uma cópia superficial. Isso se torna uma grande diferença se você precisar usar os itens que você acabou de truncar permanentemente.
Ynot
11
@Ynot ok, eu vou fazer isso um pouco mais óbvia
Pawel
4
Isso também expandirá a matriz se for menor que N
Oldrich Svec 02/12/19
13

Não tente fazer isso usando uma função de mapa. A função de mapa deve ser usada para mapear valores de uma coisa para outra. Quando o número de entrada e saída coincide.

Nesse caso, use a função de filtro, que também está disponível na matriz. A função de filtro é usada quando você deseja selecionar seletivamente valores que atendem a determinados critérios. Então você pode escrever seu código como

var items = list
             .filter((i, index) => (index < 3))
             .map((i, index) => {
                   return (
                     <myview item={i} key={i.id} />
                   );
              });
sandeep
fonte
11
Você está correto no geral, mas semanticamente você deve usar o filtro para filtrar primeiro o conjunto de elementos e, em seguida, mapeie o conjunto filtrado se estiver adotando essa abordagem.
Chris
8
A função de filtro passaria por todos os elementos da matriz, enquanto a fatia não, por isso é melhor usar o fatia, certo?
ElQueFaltaba 13/06
11

Você pode filtrar usando a indexmatriz.

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

Freddy
fonte
2
.filterpor si só não é uma ótima opção, pelo menos não se a matriz de entrada puder ser longa. .filterpercorre todos os elementos da matriz, verificando sua condição. .slicenão faria isso, mas apenas extrairia os primeiros n elementos e depois pararia o processamento - o que definitivamente seria o que você deseja para uma longa lista. (Como @elQueFaltaba já disse em comentários à outra resposta.)
MikeBeaton
9

O seguinte funcionou para mim.

array.slice( where_to_start_deleting, array.length )

Aqui está um exemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.slice(2, fruits.length);
//Banana,Orange  ->These first two we get as resultant
FlyingSnowGhost
fonte
4
No primeiro exemplo você usa, slicemas no segundo você usa splice.
Veslav
3
Isso também está errado. Você obterá ["Apple", "Mango"]disso. A primeira parte da fatia não é "por onde começar a excluir"; é por onde começar a fatia. Não modifica a matriz original e não exclui nada.
Angel Joseph Piscola
0

Usar filtro

Não é a melhor prática, mas outra maneira

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

Omer
fonte