En muchas ocasiones nos interesará buscar elementos en un
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?
El método .includes()
comprueba si el elemento indicado está incluido en el 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
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 -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 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.