Buscar elementos en un array

Buscar elementos o su posición en un array


En muchas ocasiones nos interesará buscar elementos en un para, o bien, encontrar el elemento y trabajar con él, o para saber la posición del elemento en el . Para ello, existen una serie de métodos mediante los cuales podemos realizar estas acciones. Son los siguientes:

Método Descripción
.includes(element) Comprueba si element está incluido en el array.
.includes(element, from) Idem, pero partiendo desde la posición from del array.
.indexOf(element) Devuelve la posición de la primera aparición de element o -1 si no existe.
.indexOf(element, from) Idem, pero partiendo desde la posición from del array.
.lastIndexOf(element) Devuelve la posición de la última aparición de element. Devuelve -1 si no existe.
.lastIndexOf(element, from) Idem, pero partiendo desde la posición from del array.

Vamos a ver como funciona cada uno de ellos.

¿El elemento existe? (includes)

El método .includes() comprueba si el elemento indicado está incluido en el . Es posible indicar un segundo parámetro donde indicaremos la posición from desde donde empezamos a buscar:

const numbers = [5, 10, 15, 20, 25];

numbers.includes(3);    // false
numbers.includes(15);   // true

numbers.includes(15, 1);  // true
numbers.includes(15, 4);  // false

Esto puede ser realmente útil para comprobar rápidamente si un elemento está incluido en una estructura de tipo . Recuerda que el tipo de dato también tiene un método similar para comprobar si una subcadena de texto está incluida en un .

Buscar la posición (indexOf)

El método .indexOf() (el índice de..., la posición de...) hace algo similar a .includes(), pero en lugar de devolver un , devuelve la posición del elemento buscado. En el caso de no encontrarlo, devuelve un valor negativo -1.

const numbers = [5, 10, 15, 20, 25, 20, 15, 10, 5];

numbers.indexOf(5);   // 0
numbers.indexOf(15);  // 2
numbers.indexOf(25);  // 4
numbers.indexOf(99);  // -1

numbers.indexOf(15, 1); // 2
numbers.indexOf(15, 4); // 6
numbers.indexOf(15, 7); // -1

De la misma forma que en el anterior, a .indexOf() se le puede pasar un segundo parámetro para indicarle la posición desde la que queremos empezar a buscar, permitiendo encontrar elementos repetidos que estén después de ocurrencias anteriores.

Buscar al final (lastIndexOf)

Por su parte, el método .lastIndexOf() hace exactamente lo mismo que .indexOf(), con la única diferencia que empezará a buscar desde el final, en lugar desde el principio del .

Veamos el método en acción:

const numbers = [5, 10, 15, 20, 25, 20, 15, 10, 5];

numbers.lastIndexOf(5);   // 8
numbers.lastIndexOf(15);  // 6
numbers.lastIndexOf(25);  // 4
numbers.lastIndexOf(99);  // -1

numbers.lastIndexOf(15, 8); // 6
numbers.lastIndexOf(15, 5); // 2
numbers.lastIndexOf(15, 1); // -1

De esta forma, puedes buscar rápidamente elementos que se encuentren al final del array y recuperar su posición.

Buscar un elemento en un array

Ahora que conocemos los métodos anteriores, podemos aprovecharlos para buscar un elemento en un array. Cuando se trata de estructuras muy simples, no tiene sentido buscar el mismo elemento que ya conocemos y tenemos previamente, pero en estructuras más complejas si puede ser interesante.

Observa el siguiente ejemplo donde partimos de una estructura de , que tienen el nombre y la edad de una persona. Vamos a implementar una función findElement() para buscar la primera persona con una cierta edad:

const names = [
  { name: "María", age: 20 },
  { name: "Bernardo", age: 28 },
  { name: "Pancracio", age: 22 },
  { name: "Andrea", age: 19 },
  { name: "Sara", age: 29 },
  { name: "Jorge", age: 32 },
  { name: "Yurena", age: 38 },
  { name: "Ayoze", age: 18 }
];

// Busca el primer elemento con la edad indicada, sino devuelve -1
const findElement = (array, searchedAge) => {
  for (let i = 0; i < array.length; i++) {
    const element = array[i];
    if (element.age === searchedAge) {
      return element;
    }
  }
  return -1;
}

findElement(names, 19);     // { name: "Andrea", age: 19 }
findElement(names, 32);     // { name: "Jorge", age: 32 }
findElement(names, 33);     // -1

La función findElement() permite buscar en el array indicado, la edad indicada en searchedAge. Sin embargo, esta función tiene una implementación imperativa (indicas los pasos que quieres hacer). También es posible realizar una implementación declarativa (indicas lo que quieres obtener), que suele ser mucho más clara y legible en estos casos.

Para ello, usaremos la función .find() que veremos más adelante. Vamos a crear un ejemplo que haga exactamente lo mismo que lo anterior:

const findElement = (array, searchedAge) => {
  return array.find(element => element.age === searchedAge) ?? -1;
}

findElement(names, 19);     // { name: "Andrea", age: 19 }
findElement(names, 32);     // { name: "Jorge", age: 32 }
findElement(names, 33);     // -1

De la misma forma que tenemos .find() también tenemos .findIndex() que devuelve la posición en lugar del propio elemento. Veremos estas funciones .find() y .findIndex() en el tema de las Array functions.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev