ProgramingWeb

Filtrar elementos de un arreglo con javascript

El método .filter() de javascript, permite filtrar un arreglo y crear uno nuevo con los elementos que cumplan una condición especifica. Como detallamos en el siguiente ejemplo.

Para este ejercicio tenemos un array compuesto por diferentes años y necesitamos filtrar solo los que sean menores al año 2000.

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 en este ejemplo vamos a hacer algo un poco mas avanzado. Tenemos un arreglo compuesto por varios objetos de diferentes usuarios y necesitamos filtrar solo los que tengan mas de 18 años.

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 ver, filtrar valores con .filter es muy sencillo y gracias a las funciones flecha todo lo hacemos en una sola linea.

Buscar Elementos usando .filter()

Imagina que necesites buscar en un arreglo muy grande solo las palabras que terminen en una letra especifica. 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 encontrar los elementos que cumplan esa condición.

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.