Cuando estamos creando un programa dinámico e interactivo, puede ser que necesitemos agregar interacción. Por ejemplo, cuando un usuario hace clic en un botón para filtrar una lista larga de elementos.
También puede ser que necesitemos manipular una gran cantidad de información para poder mostrar solo aquellos elementos que coinciden con lo especificado por el usuario.
En este artículo, aprenderás a filtrar un arreglo en JavaScript de dos formas distintas. También aprenderás a filtrar un arreglo de objetos y devolver un arreglo compuesto por los elementos filtrados.
Cómo filtrar un arreglo con un bucle for
Antes del lanzamiento de ES6 en 2015, muchos desarrolladores dependían del método del bucle for para hacer todas las manipulaciones de arreglos. Pero como el código se volvía demasiado largo y difícil de entender, esto condujo a la creación de muchos métodos individuales de JavaScript como el método filter() (sobre el cual aprenderás más adelante).
Pero para empezar, y entender todo el panorama, vamos a aprender cómo hacerlo usando bucles.
Supongamos que tenemos un arreglos de objetos que contiene todos los datos de los usuarios como nombre, edad, ocupación, etc. y quieres filtrar aquellos usuarios cuya edad cumplan una determinada condición.
let users = [
{ name: 'John', age: 25, occupation: 'gardener' },
{ name: 'Lenny', age: 51, occupation: 'programmer' },
{ name: 'Andrew', age: 43, occupation: 'teacher' },
{ name: 'Peter', age: 81, occupation: 'teacher' },
{ name: 'Anna', age: 47, occupation: 'programmer' },
{ name: 'Albert', age: 76, occupation: 'programmer' },
]
También puedes querer filtrar el arreglo de objetos usando la edad para devolver un nuevo arreglo con aquellos usuarios cuya edad es mayor a 40 y cuya ocupación es igual a programmer:
let filteredUsers = [];
for (let i= 0; i<users.length; i++) {
if (users[i].age > 40 && users[i].occupation === 'programmer' ) {
filteredUsers = [...filteredUsers, users[i]];
}
}
console.log(filteredUsers);
Este código va a devolver un arreglo de tres usuarios que cumplen con esa condición:
Si bien esto funciona bastante bien, una mejor manera de filtrar un arreglo es usando el método filter() de ES6.
Cómo filtrar un arreglo con el método filter filter()
El método filter() es un método ES6 con un sintaxis más prolija para filtrar un arreglo. Este método devuelve un nuevo arreglo con nuevos elementos, sin modificar el arreglo original.
// Sintaxis
myArray.filter(callbackFn)
En la función callback, hay que acceder a cada elemento, el índice y hasta el arreglo original:
myArray.filter((element, index, array) => { /* ... */ })
Ahora hagamos el mismo ejemplo, pero filtrando al usuario por su edad y ocupación:
let filteredUsers = users.filter((user) => {
return user.age > 40 && user.occupation === 'programmer';
});
console.log(filteredUsers);
Esto devolverá el mismo resultado, pero seguro notarás que tu código queda más prolijo. También es importante que sepas que puedes reescribir este código en una sola línea, sin el return:
let filteredUsers = users.filter(user => user.age > 40 && user.occupation === 'programmer');
console.log(filteredUsers);
Ambos ejemplos de código van a retornar los usuarios filtrados:
El método filter() hace que sea más fácil ejecutar más operaciones directas, sin crear demasiadas variables porque se encadena a otros métodos.
Por ejemplo, puedes filtrar el nuevo arreglo y devolver otro arreglo que contenga solo los nombres:
let filteredUserNames = users.filter(user => user.age > 40 && user.occupation === 'programmer')
.sort((a, b) => a.age - b.age)
.map(user => user.name);
console.log(filteredUserNames); // ['Anna', 'Lenny', 'Albert']
Para aprender más sobre cómo filtrar arreglos en JavaScript con el método filter(), puedes leer este artículo Tutorial de Array.filter() de JavaScript y aprender aquí sobre la diferencia entre los métodos find() y filter() de JavaScript.
Cómo filtrar un objeto en JavaScript
Los objetos de JavaScript no son iterables como los arreglos o las cadenas de texto. Esto significa que no pueden ser recorridos con un bucle for, el método filter() o cualquier otro método parecido a estos. Entonces ¿cómo se puede filtrar un objeto en JavaScript?
Esto se puede hacer convirtiendo el objeto en un arreglo mediante cualquier método de objeto como Object.keys(), Object.values() o Object.entries(). Luego, puedes usar el método filter() para filtrar a través del arreglo y devolver uno nuevo con los elementos filtrados.
Por ejemplo, si tenemos un objeto con datos de los usuarios como nombre, edad y ocupación. Estos métodos estáticos de objeto van a devolver las claves, valores o cada par clave-valor como un arreglo:
const userDetails = {
firstName: "Jane",
lastName: "Daniels",
userName: "jane.daniels",
email: "jane.daniels@example.com",
comapny: "Example Inc.",
address: "1234 Example Street",
age : 25,
hobby: "Singing"
};
let keysArray = Object.keys(userDetails);
console.log(keysArray);
Esto va a devolver un arreglo de las claves del objeto:
['firstName', 'lastName', 'userName', 'email', 'comapny', 'address', 'age', 'hobby']
Entonces, ahora, puedes usar el método filter() para recorrer el arreglo y devolver uno nuevo con los elementos filtrados:
let filteredKeys = keysArray.filter(key => key.length > 5);
console.log(filteredKeys);
Esto va a devolver un arreglo con las claves que tengan un largo mayor a 5:
['firstName', 'lastName', 'userName', 'comapny', 'address', 'hobby']
Pero como seguro querrás utilizar un mejor método de filtrado, puedes, por ejemplo, filtrar el par clave-valor de nuestro objeto que incluya un nombre de un objeto mayor. Luego puedes obtener primeros las claves, filtrarlas y luego usar el método reduce() para reducir las claves filtradas a un objeto compuesto por estas claves y sus valores:
const userDetails = {
firstName: "Jane",
lastName: "Daniels",
userName: "jane.daniels",
email: "jane.daniels@example.com",
comapny: "Example Inc.",
address: "1234 Example Street",
age : 25,
hobby: "Singing"
};
const userNames = Object.keys(userDetails)
.filter((key) => key.includes("Name"))
.reduce((object, key) => {
return Object.assign(object, {
[key]: userDetails[key]
});
}, {});
console.log(userNames);
Esto devolverá un objeto con las claves filtradas y sus valores:
{
firstName: "Jane",
lastName: "Daniels",
userName: "jane.daniels"
}
Conclusión
En este artículo has aprendido a como filtrar un arreglo en JavaScript usando el bucle for y el método filter(), que tiene una mejor sintaxis para poder filtrar arreglos en JavaScript.
También has aprendido a filtrar un objeto en JavaScript, convirtiéndolo en un arreglo y luego usando el método filter().
¡Gracias por leer y diviértete programando!
Puedes acceder a más de 188 de mis artículos visitando mi sitio web. También puedes usar la barra de búsqueda para buscar si he escrito un artículo específico.