El índice de un elemento en un arreglo es importante cuando realizamos búsquedas o comprobamos si determinado valor existe en un arreglo. Hoy veremos dos maneras de buscar la posición de un elemento en un arreglo de JavaScript.

Como primer ejemplo veremos el uso de indexOf, que busca datos en arreglos con tipos de datos que no son objetos.

Buscar índice de un elemento en arreglo de JavaScript

Buscar índice de un elemento en arreglo de JavaScript

En segundo lugar, veremos una nueva versión llamada findIndex que nos permite definir una función que será la que busque a partir de un criterio, algo así como un indexOf mejorado.

Esto sirve muy bien cuando queremos buscar dentro de un arreglo de objetos o cuando queremos que se cumpla cierto criterio de búsqueda.

Cómo saber si un elemento existe

Aunque el motivo de este post es saber el índice, index o posición numérica de un elemento dentro de un arreglo, los métodos expuestos aquí devuelven el índice o -1, y si devuelven -1 significa que no encontraron el índice.

Esto lo podemos usar para comparar. Si lo que devuelven es -1, el valor no existe.

Sobre lastIndexOf

indexOf comienza a buscar desde el inicio, o desde la izquierda, como quieras verlo. En cambio, lastIndexOf busca desde la derecha, es por eso que es “Last”, porque busca el último elemento.

Tómalo en cuenta por si tus necesidades son distintas, o si tu arreglo podría tener más de una vez el elemento y quieres buscar su última ocurrencia.

Usar indexOf para buscar índice de arreglo

Ahora sí a lo que venimos. Vamos a ver un ejemplo sencillo para saber en dónde está un elemento.

La salida en este caso es 2, pues el 50 está en el índice 2 del arreglo. Aquí puedes comprobarlo:

También funciona para cadenas, así:

Ejecuta el código de ejemplo aquí.

Bueno, de hecho funciona para cualquier tipo de dato, siempre y cuando no sea un objeto.

findIndex para buscar índice en un arreglo a través de un criterio

Este método me gusta más, ya que uno define la forma en la que el elemento será buscado. De esta manera, podemos comparar propiedades de un objeto o incluso el objeto completo, pero vamos por partes.

Buscar índice comparando una propiedad

En este primer ejemplo vamos a buscar una mascota a partir de un nombre. Es decir, compararemos la propiedad del objeto con una búsqueda.

Lo importante es la parte en donde llamamos a findIndex. Utilizamos una función flecha para regresar un booleano, este booleano le indica a findIndex que hemos encontrado el valor.

Es decir, la función va a recorrer el arreglo, y comparará los valores con la búsqueda. Si la función regresa false, seguirá buscando. Si regresa true, se detiene y nos da el índice.

Pruébalo aquí.

Comparar objetos para buscar índice en arreglo de JS

Ahora veamos cómo comparar el objeto completo. Hay muchas formas de compararlo, sobre todo cuando queremos que se haga de manera eficiente.

Aquí no veremos la forma eficiente, sino una que funciona. Lo que haremos será codificar el objeto a una cadena JSON, y una cadena JSON es eso: una cadena, nada más.

De esta manera, al convertir dos objetos a JSON, si tienen exactamente las mismas propiedades y valores, se dice que son iguales.

La parte importante ahora es en donde convertimos el objeto a JSON, de forma que su tipo ahora es cadena.

Igualmente podríamos comparar propiedad por propiedad, pero sería un poco más complejo por si en el futuro agregamos más propiedades.

Como sea, aunque es un poco sucio, funciona. Puedes probarlo aquí.

Conclusiones y compatibilidad

El método que más funciona es findIndex, pues nos permite buscar a partir de un criterio. Aquí lo usamos para objetos, pero igualmente podríamos usarlo para buscar el índice en donde el valor sea mayor a determinado número, o donde una cadena empiece con determinada letra, etcétera.

Espero por el bien del mundo que no tengamos que seguir soportando viejos navegadores (personalmente no lo hago), pero en caso de que tú quieras tener el método findIndex mira esta página para ver un polyfill y esas cosas de compatibilidad.

Ah, por cierto, también existe el método find, que funciona exactamente igual que lastIndexOf pero devuelve el valor en lugar del índice.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 4,207 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

1 Comentario

Eliminar elementos duplicados de arreglos en JavaScript - Parzibyte's blog · diciembre 4, 2018 a las 12:12 pm

[…] invito a que veas cómo funciona indexOf y findIndex en JavaScript, pues es necesario para que entiendas lo que haremos […]

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada.

A %d blogueros les gusta esto: