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.

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.

No te vayas sin seguirme en Twitter, Facebook y GitHub, así me motivas a escribir más posts.
Igualmente te invito a suscribirte en la parte superior derecha escribiendo tu correo en el formulario.
Si tienes dudas déjalas en un comentario


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB. Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron. Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scripts La plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C. Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

1 Comment

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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: