Pasar al contenido principal
Jose Luján
Luis Avilés
Álvaro Felipe, Jon Mircha
Álvaro Felipe
Alberto Quiroga
Alexys Lozada, Álvaro Felipe, Daniel Romero, Jon Mircha
Daniel Romero
Alexys Lozada, Daniel Romero
Álvaro Felipe
Francisco Romero
Alexys Lozada
Álvaro Felipe
Jon Mircha
Álvaro Felipe
Daniel Romero
Daniel Romero
Jose Luján
Álvaro Felipe
Freddy Cahuas
Álvaro Felipe
Jon Mircha

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

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

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:

let greaterTen = [];

for (let i = 0; i<numbers.length; i++) {
  var currentNumber = numbers[i];
  if (currentNumber > 10) {
    greaterTen.push(currentNumber)
  }
}

console.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:

let greaterTen2 = numbers.filter(number => number > 10 );
console.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:

//ES6
let greaterTen = numbers.filter(number => { number > 10 });
console.log(greaterTen); // []

// with return
let greaterTen = numbers.filter(number => number > 10 ); // return implicito
console.log(greaterTen); // [23, 12, 45, 78, 11, 10.1, 84]


// ES5
var greaterTen = numbers.filter(function(){ 
  number > 10 
});
console.log(greaterTen); // []

// with return
var greaterTen = numbers.filter(function(){ 
  return number > 10 
});
console.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):

let students = [
  {
    name: 'Alvaro',
    score: 10,
  },
  {
    name: 'Daniel',
    score: 16,
  },
  {
    name: 'Alexys',
    score: 12,
  },
  {
    name: 'Rafa',
    score: 17,
  },
  {
    name: 'Alejandro',
    score: 8,
  },
  {
    name: 'Sofia',
    score: 9,
  }
]

let 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

Bases de Datos Desde Cero

Este curso te enseñará lo necesario para diseñar y estructurar bases de datos relacionales (SQL) para tus proyectos. También podrás...

Si este artículo te gustó suscríbete para recibir novedades del blog y promociones de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal