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.
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.
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.
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.
Ahora sí a lo que venimos. Vamos a ver un ejemplo sencillo para saber en dónde está un elemento.
let arreglo = [1, 2, 50, 1, 2, 3, 88, 45],
busqueda = 50;
console.log("Tenemos el arreglo: ", arreglo);
console.log("Buscando ", busqueda);
let indice = arreglo.indexOf(busqueda);
console.log("El elemento buscado está en el índice ", indice);
La salida en este caso es 2, pues el 50 está en el índice 2 del arreglo.
También funciona para cadenas, así:
let arreglo = ["perro", "gato", "ballena", "vaca", "burro"],
busqueda = "gato";
console.log("Tenemos el arreglo: ", arreglo);
console.log("Buscando ", busqueda);
let indice = arreglo.indexOf(busqueda);
console.log("El elemento buscado está en el índice ", indice);
Bueno, de hecho funciona para cualquier tipo de dato, siempre y cuando no sea un objeto.
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.
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.
let arreglo = [{
nombre: "Maggie",
tipo: "Perro",
edad: 3,
}, {
nombre: "Guayaba",
tipo: "Perro",
edad: 1,
}, {
nombre: "Snowball",
tipo: "Gato",
edad: 1,
},
];
let busqueda = "Guayaba";
console.log("Tenemos el arreglo: ", arreglo);
console.log("Buscando en donde el nombre sea igual a: ", busqueda);
let indice = arreglo.findIndex(mascota => mascota.nombre === busqueda);
console.log("El elemento buscado está en el índice ", indice);
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.
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.
let arreglo = [{
nombre: "Maggie",
tipo: "Perro",
edad: 3,
}, {
nombre: "Guayaba",
tipo: "Perro",
edad: 1,
}, {
nombre: "Snowball",
tipo: "Gato",
edad: 1,
},
];
// La búsqueda la pasamos a JSON
let busqueda = JSON.stringify({
nombre: "Snowball",
tipo: "Gato",
edad: 1,
});
console.log("Tenemos el arreglo: ", arreglo);
console.log("Buscando en donde el objeto sea igual a: ", busqueda);
let indice = arreglo.findIndex(mascota => JSON.stringify(mascota) === busqueda);
console.log("El elemento buscado está en el índice ", indice);
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.
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.
El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…
En este post te voy a enseñar a designar una carpeta para imprimir todos los…
En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…
Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…
Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…
Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…
Esta web usa cookies.
Ver comentarios