Comment obtenir le premier nombre N d'éléments d'un tableau

387

Je travaille avec Javascript (ES6) / FaceBook et essaie d'obtenir les 3 premiers éléments d'un tableau dont la taille varie. Je voudrais faire l'équivalent de Linq take (n).

Dans mon fichier Jsx, j'ai les éléments suivants:

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

Ensuite, pour obtenir les 3 premiers articles que j'ai essayés

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

Cela n'a pas fonctionné car la carte n'a pas de fonction définie.

Peux-tu aider s'il te plait?

javascript reactjs

— user1526912
source

4

Peut-être que je me méprends sur le problème, mais pourquoi ne pas utiliser quelque chose comme ça list.slice(0, 3);et ensuite répéter ça?

— Jesse Kernaghan

Pourquoi voulez-vous utiliser la carte? Si je comprends bien votre besoin, vous pouvez simplement utiliser slice pour prendre les n premiers éléments.

— Abhishek Jain

Si l'enseignant a dit d'utiliser la carte? :) Je suis désolé si c'est une question légitime, mais c'était juste un devoir.

— diynevala

Veuillez envisager de remplacer la réponse acceptée par celle qui s'est révélée plus utile au public

— Brian Webster

404

Je crois que ce que vous recherchez est:

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

622

Pour obtenir les premiers néléments d'un tableau, utilisez

array.slice(0, n);

— Oriol
source

58

Notez que la slicefonction sur les tableaux renvoie une copie superficielle du tableau et ne modifie pas le tableau d'origine. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

— Danny Harding

30

Cela peut être surprenant, mais la lengthpropriété d'un tableau n'est pas seulement utilisée pour obtenir le nombre d'éléments du tableau, mais elle est également accessible en écriture et peut être utilisée pour définir la longueur du lien MDN du tableau . Cela mutera le tableau.

Si le tableau actuel n'est plus nécessaire et que vous ne vous souciez pas de l'immuabilité ou que vous ne voulez pas allouer de mémoire, c'est-à-dire que pour un jeu, le moyen le plus rapide est

arr.length = n

vider un tableau

arr.length = 0

— Pawel
source

êtes-vous sûr que c'est plus rapide que arr = []?

— GrayedFox

3

L'avantage ici est d'éviter l'allocation de mémoire. L'initialisation de nouveaux objets lors de l'exécution i..e pour les jeux déclenche le ramasse-miettes et le jank.

— Pawel

Il convient de mentionner que cela mutera le tableau, où la tranche retournera une copie superficielle. Cela devient une grande différence si vous devez utiliser les éléments que vous venez de tronquer définitivement.

— Ynot

1

@Pas d'accord, je vais le rendre un peu plus évident

— Pawel

4

Cela étendra également le tableau s'il est plus petit que N

— Oldrich Svec

13

N'essayez pas de le faire en utilisant une fonction de carte. La fonction de carte doit être utilisée pour mapper des valeurs d'une chose à une autre. Lorsque le nombre d'entrées et de sorties correspond.

Dans ce cas, utilisez la fonction de filtre qui est également disponible sur le tableau. La fonction de filtre est utilisée lorsque vous souhaitez prendre de manière sélective des valeurs en usinant certains critères. Ensuite, vous pouvez écrire votre code comme

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

— sandeep
source

1

Vous avez globalement raison, mais sémantiquement, vous devez utiliser un filtre pour filtrer d' abord l'ensemble des éléments, puis mapper l'ensemble filtré si vous adoptez cette approche.

— Chris

8

La fonction de filtrage passerait par tous les éléments du tableau, tandis que la tranche ne le ferait pas, il est donc préférable d'utiliser la tranche, non?

— elQueFaltaba

11

Vous pouvez filtrer en utilisant un indextableau.

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

Développer l'extrait

— Freddy
source

2

.filterseul n'est pas un excellent choix, du moins pas si le tableau d'entrée peut être long. .filterparcourt chaque élément du tableau en vérifiant son état. .slicene ferait pas cela, mais extrairait simplement les n premiers éléments puis arrêterait le traitement - ce qui serait certainement ce que vous voulez pour une longue liste. (Comme @elQueFaltaba l'a déjà dit dans les commentaires d'une autre réponse.)

— MikeBeaton

9

Ce qui suit a fonctionné pour moi.

array.slice( where_to_start_deleting, array.length )

Voici un exemple

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

— FlyingSnowGhost
source

4

Dans le premier exemple que vous utilisez slicemais dans le second que vous utilisez splice.

— Veslav

3

C'est également faux. Vous en tirerez ["Apple", "Mango"]. La première partie de la tranche n'est pas "où commencer la suppression", c'est où commencer la tranche. Il ne modifie pas le tableau d'origine et ne supprimera rien.

— Angel Joseph Piscola

1

Avec https://github.com/Siderite/LInQer, vous pouvez accéder à Enumerable.from (list) .take (3) .toArray ();

— Siderite Zackwehdex
source

0

Utiliser un filtre

Pas la meilleure pratique mais une autre façon

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

— Omer
source