Javascript: filtrar elementos de un array con .filter()

El método filter() de Array.prototype nos permite filtrar solo los elementos que deseamos (segun ciertos criterios) y devolverlos en un nuevo array. Pongamos un ejemplo muy sencillo, de la siguiente lista de números, queremos obtener solamente los mayores que 10. let numbers = [1,5,23,4,12,45,78,8,8.9,10,11,3.4,10.1,84,6] Nuestro primer razonamiento probablemente sea hacer lo siguiente:

Diseño web
Lectura de 2 minutos
29 dic. 2016
Javascript: filtrar elementos de un array con .filter()

El método filter() de Array.prototype nos permite filtrar solo los elementos que deseamos (segun ciertos criterios) y devolverlos en un nuevo array. Pongamos un ejemplo muy sencillo, de la siguiente lista de números, queremos obtener solamente los mayores que 10.

1let numbers = [1,5,23,4,12,45,78,8,8.9,10,11,3.4,10.1,84,6]

Nuestro primer razonamiento probablemente sea hacer lo siguiente:

1let greaterTen = [];
2
3for (let i = 0; i<numbers.length; i++) {
4 var currentNumber = numbers[i];
5 if (currentNumber > 10) {
6 greaterTen.push(currentNumber)
7 }
8}
9
10console.log(greaterTen); // [23, 12, 45, 78, 11, 10.1, 84]

Como vemos en el código, hemos creado un nuevo array vacío llamado greaterTen y luego recorremos el array number con un ciclo for y en cada iteración preguntamos si el número actual es mayor que 10. En caso serlo, se añade al array greaterTen. Finalmente hemos mostrado por consola nuestro resultado.

Funciona, pero el método nativo de JavaScript array nos lo simplifica bastante:

1let greaterTen2 = numbers.filter(number => number > 10 );
2console.log(greaterTen2); // [23, 12, 45, 78, 11, 10.1, 84]

El método filter recibe un callback como parámetro, el cual a su vez recibe tres parámetros:

  • El item actual del array
  • El indice del item actual del array
  • El array actual

Internamente, este método recorre el array y para cada elemento comprueba si el callback retorna true. Finalmente, retorna un nuevo array con todos los items que pasaron la prueba.

Ten en cuenta que el callback debe retornar específicamente un valor, pues en caso contrario, se retornará un valor vacío. Para el caso anterior:

1//ES6
2let greaterTen = numbers.filter(number => { number > 10 });
3console.log(greaterTen); // []
4
5// with return
6let greaterTen = numbers.filter(number => number > 10 ); // return implicito
7console.log(greaterTen); // [23, 12, 45, 78, 11, 10.1, 84]
8
9// ES5
10var greaterTen = numbers.filter(function(){
11 number > 10
12});
13console.log(greaterTen); // []
14
15// with return
16var greaterTen = numbers.filter(function(){
17 return number > 10
18});
19console.log(greaterTen); // [23, 12, 45, 78, 11, 10.1, 84]

Ahora que aprendimos a usar filter() hagamos otro ejemplo. En esta ocasión queremos obtener la lista de estudiantes aprobados (en Perú se aprueba con nota 11):

1let students = [
2 {
3 name: 'Alvaro',
4 score: 10,
5 },
6 {
7 name: 'Daniel',
8 score: 16,
9 },
10 {
11 name: 'Alexys',
12 score: 12,
13 },
14 {
15 name: 'Rafa',
16 score: 17,
17 },
18 {
19 name: 'Alejandro',
20 score: 8,
21 },
22 {
23 name: 'Sofia',
24 score: 9,
25 }
26]
27
28let approved = students.filter(student => student.score >= 11);

¿Quieres saber más? Inscríbete a nuestro curso JavaScript Desde Cero. 25 horas de clase con proyecto de fin de curso, contenidos bonus y respuestas a tus consultas:http://escuela.digital/js

Avatar

Alvaro Felipe

@alvaroVer perfil

CEO de EDteam

Comentarios de los usuarios

Avatar
HAIRTON M.

@hairton

Este articulo me pareció muy interesante, tiene muchas aplicaciones gracias Edteam.

DC
Daniel Cruz

@danielcruz

Pudieron haberlo hecho mas interesante, que tal filtrar numeros enteros positivos en un array compuesto de numeros negativos, decimales y positivos....

AB
Alejandro Blanco Cervantes

@alejandroblancocervantes2104

Lo maximo muchas gracias, muy bien explicado, me cayo a pelo para el problema que estoy haciendo resolviendo.

Recuerda iniciar sesión para comentar este articulo

Cursos recomendados

JavaScript en el navegador

JavaScript en el navegador

Avatar

Alvaro Felipe

5

4.8

Ajax y WebSockets

Ajax y WebSockets

Avatar

Alexys Lozada

5

4.6