Existen diferentes métodos que se pueden usar en JavaScript para buscar elementos dentro de un arreglo. El método a elegir depende del caso de uso particular.

Por ejemplo,

  • Si quieres obtener todos los elementos del arreglo que cumplen una condición específica, o
  • Simplemente quieres saber si al menos uno de los elementos cumple dicha condición.
  • Si quieres saber si un valor específico hace parte del arreglo, o
  • Quieres obtener el índice de tal valor.

Para todos estos casos de uso, los métodos de JavaScript Array.prototype te ayudarán. En este artículo, discutiremos cuatro métodos que podemos usar para buscar un elemento dentro de un arreglo. Estos métodos son:

  1. Filter (filtro)
  2. Find (encuentra)
  3. Includes (incluye)
  4. IndexOf (índice de)

Veamos cada uno de ellos.

Array.filter()

Podemos usar el método Array.filter() para encontrar los elementos dentro de un arreglo que cumplan con cierta condición. Por ejemplo, si queremos obtener todos los elementos de un arreglo de números que sean mayores a 10, podemos hacer lo siguiente:

let arreglo = [10, 11, 3, 20, 5];

let mayorQueDiez = arreglo.filter(element => element > 10);

console.log(mayorQueDiez) // [11, 20]

La sintaxis para usar el método array.filter() es la siguiente:

let nuevoArreglo = arreglo.filter(callback);

Donde:

  • nuevoArreglo es el nuevo arreglo devuelto
  • arreglo es el arreglo sobre el cual se llama el método filter
  • callback es la función Callback que se aplica a cada uno de los elementos del arreglo

Si ninguno de los elementos del arreglo cumple con la condición, se devuelve un arreglo vacío. Puedes leer más sobre este método aquí.

Hay ocasiones en las que no necesitamos todos los elementos que cumplen una condición. Solo queremos saber si hay al menos un elemento que la cumpla. En ese caso, necesitas el método find().

Array.find()

Usamos el método Array.find() para encontrar el primer elemento que cumple cierta condición. Tal como el método anterior, toma un Callback como argumento y devuelve el primer elemento que cumpla la condición establecida.

Usemos el método find en el arreglo de nuestro ejemplo anterior.

let arreglo = [10, 11, 3, 20, 5];

let existeElementoMayorQueDiez = arreglo.find(element => element > 10);

console.log(existeElementoMayorQueDiez) // 11

La sintaxis de array.find() es:

let primerElementoEncontrado = arreglo.find(callback);

Callback es la función que se ejecuta sobre cada uno de los valores del arreglo y recibe tres argumentos:

  • element el elemento sobre el cual se está iterando (requerido)
  • index - el índice/posición del elemento actual (opcional)
  • array - el arreglo sobre el que se llamó find (opcional)

Toma nota que si ninguno de los elementos del arreglo cumple con la condición, devuelve undefined.

Ahora, ¿qué pasaría si quieres comprobar que un elemento específico existe dentro del arreglo? ¿cómo haríamos esto?

Array.includes()

El método includes() determina si un arreglo incluye un valor específico y devuelve verdadero o falso según corresponda.

En el ejemplo anterior, si queremos revisar si 20 es uno de los elementos del arreglo, podemos hacer lo siguiente:

let arreglo = [10, 11, 3, 20, 5];

let incluyeVeinte = arreglo.includes(20);

console.log(incluyeVeinte) // true

Notarás la diferencia entre este y los anteriores métodos que hemos visto. Este método acepta como argumento un valor en vez de un Callback.

La sintaxis de array.includes() es:

let incluyeValor = arreglo.includes(valorAEncontrar, aPartirDelIndice)

Donde

  • valorAEncontrar es el valor que estás buscando dentro del arreglo (requerido)
  • aPartirDelIndice es el índice o la posición en el arreglo desde la que deseas empezar tu búsqueda (opcional)

Para entender mejor el concepto del índice, repasemos nuestro ejemplo una vez más. Si queremos verificar que el arreglo contenga 10 partiendo desde la segunda posición, podemos hacer lo siguiente:

let arreglo = [10, 11, 3, 20, 5];

let incluyeDiezDosVeces = arreglo.includes(10, 1);

console.log(incluyeDiezDosVeces) //falso

Nota: recuerda que los índices de los elementos se cuentan desde cero, por lo que debes restar 1 a la posición con la que quieras empezar.

Array.indexOf()

El método indexOf() devuelve el primer índice encontrado de un elemento específico. Devuelve -1 si el elemento no existe en el arreglo.

Volvamos a nuestro ejemplo. Encontremos el índice de 3 en el arreglo.

let arreglo = [10, 11, 3, 20, 5];

let indiceDeTres = arreglo.indexOf(3);

console.log(indiceDeTres) // 2

Su sintaxis es similar al médoto includes:

let indiceDeElemento = arreglo.indexOf(elemento, aPartirDelIndice)

Donde:

  • elemento es el elemento que estás buscando dentro del arreglo (requerido)
  • aPartirDelIndice es el índice o la posición en el arreglo desde la que deseas empezar tu búsqueda (opcional)

Es importante mencionar que los métodos includes e indexOf usan igualdad estricta ( '===' ) para buscar dentro de un arreglo. Si los valores son de distinto tipo (por ejemplo '4' y 4), devolverán false y -1 respectivamente.

Resumen

Con estos métodos para arreglos, no necesitas usar un bucle para buscar dentro de estos. Dependiendo de lo que necesites, puedes decidir cuál de todos estos métodos es el mejor de acuerdo a tu caso de uso.

A continuación un resumen de cuándo usar cada método:

  • Usa filter si quieres encontrar todos los elementos que cumplan con una condición específica.
  • Usa find si quieres saber si al menos uno de los elementos cumple una condición específica.
  • Usa includes si quieres saber si tu arreglo contiene un valor específico.
  • Usa indexOf si quieres encontrar el índice de un elemento particular dentro del arreglo.

¿Quieres recibir notificaciones cuando publique un artículo? Haz clic aquí.

Traducido del artículo de Sarah Chima Atuonwu - Four Different Ways to Search an Array in JavaScript