Imagen destacada del artículo Cómo filtrar elementos de un array con filter javascript

Cómo filtrar elementos de un array con filter javascript

javascript svg
actualizado: 28 / 01 / 2023

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
]
*/

Cómo filtrar array de objetos con el método filter 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, necesitamos filtrar 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 para para entender mejor a filtrar array de objetos javascript, 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
// ####### Array de obejtos con 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 eliminar elementos repetidos de un arreglo en JavaScript

Imagen destacada del artículo Cómo eliminar elementos repetidos de un arreglo en JavaScript

Cómo insertar Javascript en HTML

Imagen destacada del artículo Cómo insertar Javascript en HTML

Eliminar el primer y ultimo carácter de una cadena en javascript

Imagen destacada del artículo Eliminar el primer y ultimo carácter de una cadena en javascript

Cómo eliminar elementos de un arreglo en JavaScript

Imagen destacada del artículo Cómo eliminar elementos de un arreglo en JavaScript

Gatsby JS - introducción, ventajas y usos

Imagen destacada del artículo Gatsby JS - introducción, ventajas y usos

Introducción a Nextjs

Imagen destacada del artículo Introducción a Nextjs

Calcular cuantos días hay entre dos fechas con javascript

Imagen destacada del artículo Calcular cuantos días hay entre dos fechas con javascript

Cómo insertar un elemento en un índice específico de un array en Javascript

Imagen destacada del artículo Cómo insertar un elemento en un índice específico de un array en Javascript