Cómo obtener el primer número N de elementos de una matriz

387

Estoy trabajando con Javascript (ES6) / FaceBook react y estoy tratando de obtener los primeros 3 elementos de una matriz que varía en tamaño. Me gustaría hacer el equivalente de Linq take (n).

En mi archivo Jsx tengo lo siguiente:

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

Luego para obtener los primeros 3 elementos que probé

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

Esto no funcionó ya que el mapa no tiene una función establecida.

¿Puedes por favor ayudarme?

javascript reactjs usuario1526912
fuente
44
Quizás estoy malinterpretando el problema, pero ¿por qué no usar algo así list.slice(0, 3);y luego repetirlo?
Jesse Kernaghan el
¿Por qué quieres usar el mapa? Si entiendo su requerimiento correctamente, puede usar la división para tomar los primeros n elementos.
Abhishek Jain
Si el maestro le dijo que usara el mapa? :) Lo siento si esta es una pregunta legítima, pero se sintió como una tarea.
diynevala
Considere cambiar la respuesta aceptada por la que ha resultado ser más útil para el público
Brian Webster el

Respuestas:

404

Creo que lo que estás buscando es: 

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

Esto puede ser sorprendente, pero la lengthpropiedad de una matriz no solo se usa para obtener el número de elementos de la matriz, sino que también se puede escribir y se puede usar para establecer la longitud del enlace MDN de la matriz . Esto mutará la matriz.

Si ya no se necesita la matriz actual y no le importa la inmutabilidad o no desea asignar memoria, es decir, para un juego, la forma más rápida es

arr.length = n

para vaciar una matriz

arr.length = 0
Pawel
fuente
¿estás seguro de que esto es más rápido que arr = []?
GrayedFox
3
El beneficio aquí es evitar la asignación de memoria. Inicializar nuevos objetos en tiempo de ejecución, es decir, para juegos, está activando el recolector de basura y el jank.
Pawel
Vale la pena mencionar que esto mutará la matriz, donde el corte devolverá una copia superficial. Esto se convierte en una gran diferencia si necesita hacer uso de los elementos que acaba de truncar permanentemente.
No el
1
@No está bien, lo haré un poco más obvio
Pawel
44
Esto también expandirá la matriz si es más pequeña que N
Oldrich Svec
13

No intentes hacerlo usando una función de mapa. La función de mapa debe usarse para asignar valores de una cosa a otra. Cuando el número de entrada y salida coincide.

En este caso, utilice la función de filtro que también está disponible en la matriz. La función de filtro se utiliza cuando desea tomar valores selectivamente mecanizando ciertos criterios. Entonces puedes escribir tu código como

var items = list
             .filter((i, index) => (index < 3))
             .map((i, index) => {
                   return (
                     <myview item={i} key={i.id} />
                   );
              });
sandeep
fuente
1
En general, es correcto, pero semánticamente debe usar filter para filtrar primero el conjunto de elementos, luego, mapear el conjunto filtrado si está siguiendo este enfoque.
Chris
8
La función de filtro pasaría por todos los elementos de la matriz, mientras que el segmento no lo haría, por lo que es mejor usar el segmento, ¿verdad?
elQueFaltaba
11

Puede filtrar usando la indexmatriz.

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

Freddy
fuente
2
.filterpor sí solo no es una gran opción, al menos no si la matriz de entrada puede ser larga. .filterpasa por cada elemento de la matriz verificando su condición. .sliceno haría esto, sino que simplemente extraería los primeros n elementos y luego detendría el procesamiento, que definitivamente sería lo que desea para una larga lista. (Como @elQueFaltaba ya dijo en comentarios a otra respuesta.)
MikeBeaton
9

Lo siguiente funcionó para mí.

array.slice( where_to_start_deleting, array.length )

Aquí hay un ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.slice(2, fruits.length);
//Banana,Orange  ->These first two we get as resultant
FlyingSnowGhost
fuente
44
En el primer ejemplo que usa, slicepero en el segundo que usa splice.
Veslav el
3
Esto también está mal. Obtendrás ["Apple", "Mango"]de esto. La primera parte del segmento no es "dónde comenzar a eliminar", es dónde comenzar el segmento. No modifica la matriz original y no eliminará nada.
Angel Joseph Piscola
0

Usar filtro

No es la mejor práctica, sino de otra manera.

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

Omer
fuente