Imagen destacada del artículo Cómo filtrar elementos de un array con el método .filter()

Cómo filtrar elementos de un array con el método .filter()

javascript svg
actualizado: 28 / 09 / 2022

El método .filter() de javascript, permite filtrar un arreglo y crear un nuevo arreglo con los elementos que cumplan una condición específica.

Hagamos un ejemplo sencillo en este ejercicio tenemos un array compuesto por diferentes años y necesitamos crear un nuevo arreglo solo con los años que sean menores al 2000.

js
const years = [
1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002,
2003,
];
const yearsUnder2000 = years.filter(year => year < 2000);
console.log(yearsUnder2000);
/*
[
1990, 1991, 1992,
1993, 1994, 1995,
1996, 1997, 1998,
1999
]
*/

Filtrar array de objetos con el método .filter en js

El ejercicio anterior es muy útil, pero para profundizar vamos a realizar un nuevo ejemplo. Tenemos un arreglo compuesto por varios objetos de diferentes usuarios y necesitamos filtrar lo los elementos para obetener un nuevo arreglo solo con aquellos usuarios que sean mayores a 18 años.

js
const users = [
{
name: "Karla",
age: 15,
},
{
name: "María",
age: 21,
},
{
name: "Pedro",
age: 33,
},
{
name: "carlos",
age: 16,
},
{
name: "Karen",
age: 38,
},
];
const userGreaterThan18 = users.filter(user => user.age > 18);
console.log(userGreaterThan18);
/*
[
{ name: 'María', age: 21 },
{ name: 'Pedro', age: 33 },
{ name: 'Karen', age: 38 }
]
*/

Como puedes apreciar filtrar los valores de un array en javascript es realmente sencillo con el método .filter() y gracias a las funciones flecha podemos lograr grandes resultados en una sola línea de código.

Buscar elementos en un arreglo usando el método .filter

Imagina que necesitas encontrar en un arreglo muy grande solo las palabras que terminen en una letra específica Lo que vamos a hacer para resolver este problema es crear una función que reciba una letra y un arreglo con dichas palabras, luego usando el método .filter() encontraremos los elementos que cumplan esa condición.

js
const arrWords = [
"hola",
"estamos",
"filtrando",
"valores",
"en",
"js",
"para",
"mejorar",
"nuestra",
"habilidad",
];
function filterForLastLetter(letter, words) {
return words.filter(word => word[word.length - 1] === letter);
}
console.log(filterForLastLetter("a", arrWords));
// [ 'hola', 'para', 'nuestra' ]

Y con esto damos por terminado este tutorial puedes ver todo el código en el siguiente enlace. Muchas gracias por leerme y espero haberte ayudado.

Bonus filtrar un objeto con doble condición

Este ejercicio lo encontre en el adventjs 2022 de midudev y me parecio interesante agregarlo a este artículo, el enunciado es el siguiente:

Contador de ovejas para dormir

Considera una lista/array de ovejas. Cada oveja tiene un nombre y un color. Haz una función que devuelva una lista con todas las ovejas que sean de color rojo y que además su nombre contenga tanto las letras n Y a, sin importar el orden, las mayúsculas o espacios.

js
// ####### Lista de ovejas a filtrar ########
const ovejas = [
{ name: "Noa", color: "azul" },
{ name: "Ovejita", color: "azul" },
{ name: "Eugenia", color: "rojo" },
{ name: "Navidad", color: "rojo" },
{ name: "Ki Na Ma", color: "rojo" },
{ name: "Ki N M", color: "rojo" },
];
js
function contarOvejas(ovejas) {
// 1. filtramos solo las ovejas de color rojo
const ovejasRojas = ovejas.filter(oveja => oveja.color === "rojo");
// 2. filtar solo las ovejas que contengan las letras n y a en su nombre .
const ovejasConNyA = ovejasRojas.filter(
oveja =>
oveja.name.toLowerCase().includes("n") &&
oveja.name.toLowerCase().includes("a")
);
// aplicamos a cada nombre el método toLower case para transformar todas las letra en minúsculas.
// gracias al método .includes encontramos solo los elementos que contengan la letras n y a.
return ovejasConNyA;
// Por último retornamos el arreglo con los nuevos valores ya filtrados
}
console.log(contarOvejas(ovejas));
/*
## Para este ejemplo el resultado sería el siguiente:
[
{ name: "Eugenia", color: "rojo" },
{ name: "Navidad", color: "rojo" },
{ name: "Ki Na Ma", color: "rojo" },
];
*/
Artículos relacionados:
Cómo poner comentarios en javascript

Imagen destacada del artículo Cómo poner comentarios en javascript

Desestructuración (destructuring) de parámetros en funciones con typescript.

Imagen destacada del artículo Desestructuración (destructuring) de parámetros en funciones con typescript.

Cómo crear elementos html con el método .createElement de javascript

Imagen destacada del artículo Cómo crear elementos html con el método .createElement de javascript

Cómo ocultar un div con javascript

Imagen destacada del artículo Cómo ocultar un div con javascript

Verificar si una expresión es un palindromo con javascript

Imagen destacada del artículo Verificar si una expresión es un palindromo con javascript

Cómo hacer un menú hamburguesa con html, css y javascript

Imagen destacada del artículo Cómo hacer un menú hamburguesa con html, css y javascript

Cambiar estilos css usando javascript

Imagen destacada del artículo Cambiar estilos css usando javascript

¿Cómo recorrer un array en javascript?

Imagen destacada del artículo ¿Cómo recorrer un array en javascript?