¿Qué es y cómo buscar elementos en array JavaScript? Ejemplos!
¿Buscas un elemento específico dentro de un array en JavaScript? ¡Estás en el lugar correcto! En este post te mostraremos formas sencillas y eficientes de encontrar justo lo que necesitas. Desde el clásico método indexOf hasta las funciones más modernas como find e includes, exploraremos diferentes técnicas para que puedas elegir la que mejor se adapte a tu caso. ¡No te lo pierdas!

Índice
1. ¿Qué es buscar un elementos en un array en JavaScript?
Imagina un array como una lista ordenada de elementos. Cada elemento tiene una posición única dentro de esa lista, llamada índice. Buscar un elemento en un array significa encontrar la posición exacta de ese elemento específico dentro de la lista.
¿Qué es un array en JavaScript? Un array es una estructura de datos que almacena una colección ordenada de valores, y en JavaScript es muy común trabajar con ellos para manejar datos dinámicos.
1.1. ¿Para que sirve buscar elementos en arrays?
La búsqueda de elementos en arrays es una operación fundamental en la programación. Se utiliza en una amplia variedad de tareas, como:
- Validación de datos:
- Verificar si un valor ya existe en una lista antes de agregarlo.
- Filtrado de datos:
- Seleccionar elementos que cumplan ciertas condiciones.
- Ordenamiento de datos:
- Reorganizar los elementos de un array según un criterio específico.
- Manipulación de datos:
- Modificar o eliminar elementos de un array.
1.2. ¿Cómo se hace en JavaScript?
JavaScript nos proporciona varios métodos de arrays para buscar elementos. Cada método tiene sus particularidades y se adapta a diferentes escenarios (en siguientes puntos vamos ampliando sobre los mas comunes).
- indexOf():
- Devuelve el índice de la primera aparición de un elemento. Si el elemento no se encuentra, devuelve -1.
- lastIndexOf():
- Devuelve el índice de la última aparición de un elemento.
- includes():
- Devuelve un valor booleano (true o false) indicando si el elemento existe en el array.
- find():
- Busca el primer elemento que cumpla una condición específica y devuelve ese elemento.
- findIndex():
- Busca el primer elemento que cumpla una condición específica y devuelve su índice.
1.4. ¿Qué método elegir?
La elección del método adecuado depende de lo que quieras lograr:
- Si necesitas conocer la posición exacta del elemento, utiliza
indexOfolastIndexOf. - Si solo quieres saber si el elemento existe, utiliza
includes. - Si quieres encontrar un elemento que cumpla una condición más compleja, utiliza
findofindIndex.
1.3. Ejemplo para entender que significa buscar elementos en arrays:
Ejemplo con juguetes:
Imagina que tienes una caja de juguetes. Esta caja es como un array en JavaScript, y cada juguete dentro de la caja es un elemento del array.
Supongamos que tu caja de juguetes contiene los siguientes juguetes:
- Un coche rojo
- Una muñeca
- Un oso de peluche
- Un balón
En JavaScript, esto sería representado como un array así:
const juguetes = ['coche rojo', 'muñeca', 'oso de peluche', 'balón'];Lenguaje del código: JavaScript (javascript)
Buscar un juguete:
Ahora, si quieres saber si tienes un balón en tu caja de juguetes, estarías buscando un elemento específico dentro del array. En JavaScript, usarías el método includes() para esto:
const tengoUnBalon = juguetes.includes('balón');
console.log(tengoUnBalon); // Esto mostrará true en la consola, porque tienes un balónLenguaje del código: JavaScript (javascript)
Otro ejemplo: encontrar la posición de un juguete
Si quieres saber en qué posición está la muñeca, usarías el método indexOf():
const posicionDeLaMuñeca = juguetes.indexOf('muñeca');
console.log(posicionDeLaMuñeca); // Esto mostrará 1, porque la muñeca está en la segunda posición (índice 1)
Lenguaje del código: JavaScript (javascript)
En resumen:
- Buscar si un elemento existe: Usamos
includes(). - Encontrar la posición de un elemento: Usamos
indexOf().
NOTA!!!! Si te animas y deseas ver el resultado de este ejemplo y de todos los que iremos proporcionando directamente desde tu PC, te invito a seguir estos pasos.
- Primero, revisa el punto 5 del siguiente artículo sobre como usar e instalar VSCode (este es el editor de código mas usado), donde encontrarás los pasos para crear la estructura necesaria para visualizar una página desde tu navegador predeterminado.
- Si entendiste correctamente este paso anterior, sabrás donde colocar el código
scriptque te acabamos de proporcionar. Ahora, puedes visualizar el resultado, para ello puedes hacer lo siguiente:- Una vez abierta y visualizada la página, abre la consola del navegador presionando la tecla F12.
- Ahora, dirígete a la pestaña que dice
Console, y desde aquí podrás ver el resultado del script que hayamos introducido anteriormente.
- No te preocupes, estos pasos son más simples de lo que parecen!!!! Entonces… cada vez que dejemos un código de ejemplo como éste, puedes seguir estos pasos y ver los resultados por ti mismo. ¡Ojalá te animes!!!!
2. ¿Cómo buscar elementos en un array con JavaScript?
Existen varios métodos que podemos usar para realizar esta búsqueda:
2.1. Método indexOf():
El método indexOf() se utiliza para buscar el índice de la primera aparición de un valor específico dentro de un array. Si el valor no está presente, devuelve -1.
Este método realiza una búsqueda estricta, es decir, compara los elementos usando el operador de igualdad estricta (===).
2.1.1. Características clave:
- Búsqueda estricta:
- Usa
===, por lo que considera el tipo de datos al comparar (por ejemplo,5y'5'son diferentes).
- Usa
- No modifica el array:
- Es un método no destructivo; no cambia el contenido del array original.
- Devuelve el índice:
- Proporciona la posición del primer elemento coincidente. Si no encuentra el valor, devuelve
-1.
- Proporciona la posición del primer elemento coincidente. Si no encuentra el valor, devuelve
- Orden de búsqueda:
- Recorre el array desde el inicio hasta el final.
- Case-sensitive (distingue entre mayúsculas y minúsculas):
- Si se usa con cadenas, distingue entre caracteres en mayúscula y minúscula.
2.1.2. Sintaxis:
array.indexOf(elementoBuscado, inicio);Lenguaje del código: CSS (css)
Parámetros: Lo parámetros en esta sintaxis incluyen:
elementoBuscado(obligatorio): El valor que deseas buscar en el array.inicio(opcional): La posición desde la cual comienza la búsqueda. Por defecto, es0.
Valor de retorno:
- Devuelve el índice del primer elemento coincidente.
- Devuelve
-1si el elemento no se encuentra.
Explicación de la sintaxis:
- El
arrayes el arreglo donde se realiza la búsqueda. - El
elementoBuscadopuede ser un número, cadena, objeto, etc. - El parámetro
inicioes opcional y permite saltar posiciones iniciales para buscar desde un índice específico.
2.1.3. Ejemplo de método indexOf():
const frutas = ['manzana', 'pera', 'plátano', 'cereza', 'manzana'];
// Buscar la primera aparición de 'manzana'
const indiceManzana = frutas.indexOf('manzana');
// Buscar un elemento que no existe
const indiceUva = frutas.indexOf('uva');
// Buscar desde un índice específico
const indiceManzanaDesde2 = frutas.indexOf('manzana', 2);
console.log(indiceManzana); // 0
console.log(indiceUva); // -1
console.log(indiceManzanaDesde2); // 4Lenguaje del código: JavaScript (javascript)
Explicación del ejemplo:
frutas.indexOf('manzana'):- Busca
'manzana'en todo el array. - La primera aparición de
'manzana'está en el índice0, por lo que devuelve0.
- Busca
frutas.indexOf('uva'):- Busca
'uva', pero no está presente en el array. - Devuelve
-1porque no encuentra el elemento.
- Busca
frutas.indexOf('manzana', 2):- Busca
'manzana'a partir del índice2(omite los índices0y1). - Encuentra otra aparición de
'manzana'en el índice4.
- Busca
Notas adicionales:
- Si necesitas buscar desde el final hacia el inicio, considera usar el método
lastIndexOf(). - Para casos más complejos, como buscar un objeto, usa métodos como
findIndex()con una función de prueba.
RESUMEN:
indexOf() es una herramienta muy útil para encontrar la posición de un elemento en un array. Es importante recordar que:
- Devuelve el índice del primer elemento encontrado.
- Si el elemento no se encuentra, devuelve -1.
- Puedes especificar un punto de partida para la búsqueda.
Con esta información, podrás utilizar indexOf() de manera efectiva en tus proyectos de JavaScript.
2.2. Método lastIndexOf():
El método lastIndexOf() busca un elemento en un array y devuelve el índice de su última aparición. Si el elemento no se encuentra, devuelve -1.
A diferencia de indexOf(), que busca desde el principio del array, lastIndexOf() comienza la búsqueda desde el final y retrocede hasta encontrar el elemento buscado. Es útil cuando un elemento aparece varias veces y necesitas obtener la posición de su última instancia.
2.2.1. Características clave
- Búsqueda estricta:
- Usa igualdad estricta (
===) para comparar los elementos del array.
- Usa igualdad estricta (
- No modifica el array:
- Es un método no destructivo; no altera el contenido del array original.
- Recorrido desde el final:
- Busca desde el último elemento hacia el primero.
- Devuelve el índice:
- Retorna la posición de la última coincidencia. Si no encuentra el valor, devuelve
-1.
- Retorna la posición de la última coincidencia. Si no encuentra el valor, devuelve
- Case-sensitive (distingue mayúsculas de minúsculas): Si se usa con cadenas, considera las diferencias de capitalización.
2.2.2. Sintaxis
array.lastIndexOf(elementoBuscado, desde);Lenguaje del código: CSS (css)
Parámetros:
elementoBuscado(obligatorio): El valor que deseas buscar en el array.desde(opcional): La posición desde la cual comienza la búsqueda hacia atrás. Por defecto, es la longitud del array menos uno (array.length - 1).
Valor de retorno:
- Devuelve el índice de la última aparición del elemento.
- Devuelve
-1si el elemento no se encuentra.
Explicación de la sintaxis
array: El array donde se realiza la búsqueda.elementoBuscado: El valor a buscar en el array. Puede ser un número, cadena, booleano, etc.desde(opcional): Indica el índice desde donde se empieza a buscar hacia atrás. Si no se especifica, comienza desde el último elemento del array.
2.2.3. Ejemplo con lastIndexOf():
const numeros = [1, 2, 3, 2, 4, 2, 5];
// Buscar la última aparición de '2'
const ultimaAparicionDos = numeros.lastIndexOf(2);
// Buscar un elemento que no existe
const ultimaAparicionSiete = numeros.lastIndexOf(7);
// Buscar desde un índice específico
const ultimaAparicionDesde3 = numeros.lastIndexOf(2, 3);
console.log(ultimaAparicionDos); // 5
console.log(ultimaAparicionSiete); // -1
console.log(ultimaAparicionDesde3); // 3Lenguaje del código: JavaScript (javascript)
Explicación del ejemplo:
numeros.lastIndexOf(2):- Busca el número
2en todo el array desde el final hacia el inicio. - Encuentra la última aparición de
2en el índice5.
- Busca el número
numeros.lastIndexOf(7):- Busca el número
7, pero no está presente en el array. - Devuelve
-1porque no encuentra el elemento.
- Busca el número
numeros.lastIndexOf(2, 3):- Busca el número
2comenzando desde el índice3hacia atrás. - Encuentra la aparición de
2en el índice3.
- Busca el número
Notas adicionales:
- Si necesitas buscar desde el inicio hacia el final, utiliza
indexOf(). - Si el array contiene valores complejos como objetos, necesitarás un método como
findIndex()con una función de prueba.
RESUMEN: lastIndexOf() es una herramienta útil para encontrar la última aparición de un elemento en un array. Su funcionamiento es similar a indexOf(), pero comienza la búsqueda desde el final del array. Al comprender su sintaxis y características, podrás utilizarlo de manera efectiva en tus proyectos de JavaScript.
2.3. Método includes():
El método includes() verifica si un array contiene un elemento específico y devuelve un valor booleano:
truesi el elemento está presente.falsesi no lo está.
Es útil para comprobar rápidamente si un valor existe en un array sin necesidad de conocer su índice.
2.3.1. Características clave
- Retorna un booleano:
- Devuelve
trueofalsedependiendo de si encuentra el elemento en el array.
- Devuelve
- No modifica el array:
- Es un método no destructivo; el array original no se altera.
- Búsqueda estricta:
- Usa igualdad estricta (
===) para comparar los elementos.
- Usa igualdad estricta (
- Recorrido secuencial:
- Busca desde el índice inicial del array hasta el final.
- Soporta un inicio opcional:
- Puedes especificar un índice desde el cual comenzar la búsqueda.
2.3.2. Sintaxis:
array.includes(elementoBuscado, inicio);Lenguaje del código: CSS (css)
Parámetros:
elementoBuscado(obligatorio): El valor que deseas verificar si existe en el array.inicio(opcional): Índice desde el cual comenzar la búsqueda. Por defecto, es0.
Valor de retorno:
- Devuelve
truesi el elemento está presente. - Devuelve
falsesi no encuentra el elemento.
Explicación de la sintaxis
array: El array en el que deseas realizar la búsqueda.elementoBuscado: El valor que deseas verificar. Puede ser un número, cadena, booleano, etc.inicio(opcional): Un índice a partir del cual se comienza a buscar. Si es negativo, se cuenta desde el final del array hacia atrás.
2.3.3. Ejemplo con includes():
const colores = ['rojo', 'azul', 'verde', 'amarillo'];
// Verificar si el array incluye el color 'azul'
const incluyeAzul = colores.includes('azul');
// Verificar si incluye un color inexistente
const incluyeNegro = colores.includes('negro');
// Verificar a partir de un índice específico
const incluyeVerdeDesde2 = colores.includes('verde', 2);
console.log(incluyeAzul); // true
console.log(incluyeNegro); // false
console.log(incluyeVerdeDesde2); // trueLenguaje del código: JavaScript (javascript)
Explicación del ejemplo:
colores.includes('azul'):- Busca
'azul'en el array desde el índice0. - Encuentra el elemento, por lo que devuelve
true.
- Busca
colores.includes('negro'):- Busca
'negro', pero no está en el array. - Devuelve
false.
- Busca
colores.includes('verde', 2):- Busca
'verde'comenzando desde el índice2. - Encuentra
'verde'en el índice2, por lo que devuelvetrue.
- Busca
Notas adicionales
- Si necesitas verificar la presencia de objetos o arrays anidados, este método puede no ser efectivo porque compara referencias, no contenido.
- Para búsquedas de índices en lugar de valores booleanos, utiliza
indexOf().
- Para búsquedas de índices en lugar de valores booleanos, utiliza
RESUMEN:
includes() es una herramienta muy útil para verificar la existencia de un elemento en un array. Su sintaxis es sencilla y su resultado es un valor booleano claro. Es ideal cuando no necesitas conocer la posición exacta del elemento, sino simplemente confirmar si está presente o no.
2.4. Método find():
El método find() busca en un array el primer elemento que cumple una condición específica definida en una función de prueba. Cuando encuentra dicho elemento, lo devuelve. Si ningún elemento cumple la condición, devuelve undefined.
Este método es especialmente útil para trabajar con arrays complejos como aquellos que contienen objetos, ya que te permite localizar rápidamente un elemento con características específicas.
2.4.1. Características clave
- Devuelve un elemento:
- No devuelve el índice ni un booleano, sino el primer elemento que satisface la condición.
- Función de prueba:
- La condición para encontrar el elemento se define mediante una función de prueba que se ejecuta para cada elemento del array.
- Recorrido secuencial:
- Itera sobre los elementos del array desde el primer índice hasta el último.
- No modifica el array:
- Es un método no destructivo.
- Retorno de
undefined:- Si no encuentra ningún elemento que cumpla la condición, devuelve
undefined.
- Si no encuentra ningún elemento que cumpla la condición, devuelve
2.4.2. Sintaxis
array.find(callback(elemento, indice, array), thisArg);Lenguaje del código: PHP (php)
Parámetros:
callback(obligatorio): Una función que se ejecuta en cada elemento. Tiene los siguientes argumentos:elemento: El elemento actual del array.indice(opcional): El índice del elemento actual.array(opcional): El array sobre el que se está iterando.
thisArg(opcional): Un valor que se utiliza comothisdentro de la función de prueba.
Valor de retorno:
- Devuelve el primer elemento que satisface la condición.
- Si no se encuentra ningún elemento, devuelve
undefined.
Explicación de la sintaxis
array: El array en el que deseas buscar un elemento.callback: La función que define la condición a cumplir.- Si el
callbackdevuelvetrue, se detiene la búsqueda y retorna el elemento. - Si devuelve
false, continúa con el siguiente elemento.
- Si el
thisArg(opcional): Contexto opcional que puedes pasar a la función de prueba.
2.4.3. Ejemplo con find():
const personas = [
{ nombre: 'Juan', edad: 25 },
{ nombre: 'Ana', edad: 30 },
{ nombre: 'Luis', edad: 35 },
{ nombre: 'María', edad: 28 }
];
// Encontrar a la primera persona mayor de 30 años
const mayorDe30 = personas.find(persona => persona.edad > 30);
// Encontrar a alguien con el nombre 'Ana'
const llamadaAna = personas.find(persona => persona.nombre === 'Ana');
// Intentar encontrar a alguien con 20 años (no existe)
const edad20 = personas.find(persona => persona.edad === 20);
console.log(mayorDe30); // { nombre: 'Luis', edad: 35 }
console.log(llamadaAna); // { nombre: 'Ana', edad: 30 }
console.log(edad20); // undefinedLenguaje del código: JavaScript (javascript)
Explicación del ejemplo:
personas.find(persona => persona.edad > 30):- La función busca la primera persona cuya edad sea mayor a 30.
- Encuentra a Luis, ya que es el primer elemento que cumple la condición (
edad > 30). - Devuelve
{ nombre: 'Luis', edad: 35 }.
personas.find(persona => persona.nombre === 'Ana'):- Busca a alguien con el nombre exacto
'Ana'. - Encuentra a Ana y devuelve su objeto:
{ nombre: 'Ana', edad: 30 }.
- Busca a alguien con el nombre exacto
personas.find(persona => persona.edad === 20):- Intenta encontrar una persona con
edad === 20. - Ningún elemento cumple esta condición, por lo que devuelve
undefined.
- Intenta encontrar una persona con
Notas adicionales
- Versatilidad con objetos: Es ideal para arrays de objetos, ya que permite búsquedas basadas en propiedades específicas.
- Alternativa: Si necesitas el índice del elemento que cumple la condición, usa
findIndex().
RESUMEN:
find() es una herramienta poderosa y flexible para buscar elementos en arrays. Te permite definir condiciones personalizadas a través de funciones de callback, lo que te brinda un gran control sobre la búsqueda. Es ideal cuando necesitas encontrar el primer elemento que cumple ciertos criterios sin tener que iterar sobre todo el array.
2.5. Método findIndex():
El método findIndex() busca en un array el índice del primer elemento que cumple una condición específica definida en una función de prueba. Si no encuentra ningún elemento que cumpla la condición, devuelve -1.
Es útil cuando necesitas saber la posición de un elemento en lugar del elemento en sí, especialmente en arrays complejos o para realizar operaciones basadas en índices.
2.5.1. Características clave
- Devuelve un índice:
- Proporciona el índice del primer elemento que cumple la condición.
- Función de prueba:
- Utiliza una función de prueba para evaluar cada elemento del array.
- Recorrido secuencial:
- Itera desde el primer elemento hasta el último.
- No modifica el array:
- Es un método no destructivo.
- Retorno de
-1:- Si ningún elemento cumple la condición, devuelve
-1.
- Si ningún elemento cumple la condición, devuelve
2.5.2. Sintaxis
array.findIndex(callback(elemento, indice, array), thisArg);Lenguaje del código: PHP (php)
Parámetros:
callback(obligatorio): Una función que se ejecuta en cada elemento del array y define la condición a cumplir. Sus argumentos son:elemento: El elemento actual del array.indice(opcional): El índice del elemento actual.array(opcional): El array que se está recorriendo.
thisArg(opcional): Un valor que se utiliza comothisdentro de la función de prueba.
Valor de retorno:
- Devuelve el índice del primer elemento que satisface la condición.
- Si no encuentra ningún elemento que cumpla la condición, devuelve
-1.
Explicación de la sintaxis
array: El array donde se buscará el elemento.callback: Función que define la condición para encontrar el índice.- Si el
callbackdevuelvetruepara un elemento, se detiene la búsqueda y devuelve su índice. - Si devuelve
false, continúa con el siguiente elemento.
- Si el
thisArg(opcional): Contexto opcional para usar comothisdentro delcallback.
2.5.3. Ejemplo con findIndex():
const productos = [
{ id: 1, nombre: 'Teclado', precio: 25 },
{ id: 2, nombre: 'Ratón', precio: 15 },
{ id: 3, nombre: 'Monitor', precio: 200 },
{ id: 4, nombre: 'Ratón', precio: 18 }
];
// Buscar el índice del primer producto cuyo precio sea mayor a 20
const indiceMayorA20 = productos.findIndex(producto => producto.precio > 20);
// Buscar el índice del primer producto llamado "Ratón"
const indiceRaton = productos.findIndex(producto => producto.nombre === 'Ratón');
// Buscar un producto inexistente (precio > 300)
const indiceInexistente = productos.findIndex(producto => producto.precio > 300);
console.log(indiceMayorA20); // 0
console.log(indiceRaton); // 1
console.log(indiceInexistente); // -1Lenguaje del código: JavaScript (javascript)
Explicación del ejemplo:
productos.findIndex(producto => producto.precio > 20):- Busca el índice del primer producto con un precio mayor a
20. - Encuentra el primer producto con ID
1y precio25. - Devuelve el índice
0.
- Busca el índice del primer producto con un precio mayor a
productos.findIndex(producto => producto.nombre === 'Ratón'):- Busca el índice del primer producto cuyo nombre sea
'Ratón'. - Encuentra el segundo elemento en el índice
1.
- Busca el índice del primer producto cuyo nombre sea
productos.findIndex(producto => producto.precio > 300):- Busca un producto con precio mayor a
300. - Ningún producto cumple esta condición.
- Devuelve
-1.
- Busca un producto con precio mayor a
Notas adicionales
- Ideal para búsquedas basadas en condiciones complejas: A diferencia de
indexOf(), puedes usar funciones para definir condiciones personalizadas. - Alternativa: Si necesitas el elemento en lugar del índice, utiliza
find(). - Eficiencia: Una vez que encuentra un elemento que cumple la condición, se detiene y no sigue iterando.
3. ¿Cuándo usar estos métodos para buscar elementos en arrays?
3.1. ¿Cuándo usar indexOf()?
Cuándo usarlo:
- Búsqueda de índices simples para encontrar la posición de la primera aparición de un valor exacto.
- Comparaciones estrictas: Solo funciona bien con valores primitivos.
- No necesitas una condición compleja, solo buscas un valor específico.
Ejemplos prácticos reales:
- Determinar la posición de un producto específico en un carrito de compras.
- Verificar en qué posición se seleccionó una respuesta en un formulario.
- Encontrar la primera aparición de una palabra clave en un array de palabras de texto.
3.2. ¿Cuándo usar lastIndexOf()
Cuándo usarlo:
- Búsqueda desde el final para encontrar la última aparición de un valor en el array.
- Arrays con valores repetidos, como logs de eventos o historial de acciones.
- Comparaciones estrictas: No maneja condiciones complejas, solo busca valores exactos.
Ejemplos prácticos reales:
- Identificar la última vez que un usuario accedió a una página en un historial.
- Encontrar la posición de la última ocurrencia de un error específico en un registro de errores.
- Determinar el índice del último mensaje enviado por un usuario en un chat.
3.3. ¿Cuándo usar includes()
Cuándo usarlo:
- Verificación rápida de existencia (true/false) de un elemento en un array.
- Lectura clara y simple, sin necesidad de índices.
- Ideal para operaciones rápidas, especialmente en arrays pequeños.
Ejemplos prácticos reales:
- Verificar si un usuario ya está en una lista de invitados a un evento.
- Determinar si un producto está disponible en el inventario.
- Comprobar si una palabra está incluida en una lista de palabras prohibidas para moderar contenido.
3.4. ¿Cuándo usar find()
Cuándo usarlo:
- Condiciones personalizadas cuando necesitas buscar un elemento que cumpla ciertos criterios.
- Trabajar con objetos, especialmente cuando tienes arrays de objetos.
- Obtener el elemento, no su índice.
Ejemplos prácticos reales:
- Buscar el primer producto con descuento en una tienda en línea.
- Encontrar el primer empleado disponible para asignarle una tarea.
- Identificar el primer vehículo con capacidad suficiente para transportar una carga.
3.5. ¿Cuándo usarfindIndex()
Cuándo usarlo:
- Condiciones personalizadas con índices para buscar un elemento y obtener su posición en el array.
- Trabajar con posiciones para modificar, reemplazar o eliminar elementos en el array.
- Ideal para arrays complejos donde necesitas localizar un índice basado en propiedades específicas.
Ejemplos prácticos reales:
- Localizar la posición de un pedido en la lista de entregas pendientes para actualizar su estado.
- Encontrar el índice del primer cliente con una deuda pendiente en un sistema de facturación.
- Determinar qué tarea es la próxima en la lista de tareas basada en criterios de prioridad.
4. Resumen de los métodos para buscar en arrays con JS.
| Método | Busca qué? | Retorna | Condición compleja | Índice o elemento | Útil para |
|---|---|---|---|---|---|
indexOf() |
Valor exacto | Índice o -1 si no lo encuentra | ❌ | Índice | Encontrar la primera aparición de un valor. |
lastIndexOf() |
Valor exacto | Último índice o -1 | ❌ | Índice | Encontrar la última aparición de un valor. |
includes() |
Valor exacto | true o false | ❌ | Ninguno | Verificar si un valor existe en el array. |
find() |
Valor que cumple condición | El valor encontrado o undefined |
✅ | Elemento | Buscar el primer elemento que cumple la condición. |
findIndex() |
Valor que cumple condición | Índice o -1 | ✅ | Índice | Buscar la posición del primer elemento que cumple la condición. |
5. Preguntas frecuentes sobre cómo buscar elementos en un array.
El método indexOf() devuelve la posición de un elemento en un array o -1 si no lo encuentra:
let pos = arr.indexOf(10);. Busca de izquierda a derecha y es útil para arrays con valores primitivos.
lastIndexOf() funciona igual que indexOf() pero busca desde el final:
let pos = arr.lastIndexOf(10);. Es útil cuando un valor puede repetirse y necesitas su última aparición.
El método includes() devuelve true si el elemento existe en el array y false si no:
let existe = arr.includes(10);. Es útil para verificar la presencia de valores primitivos sin necesidad de obtener su índice.
El método find() devuelve el primer elemento que cumple una condición:
let resultado = arr.find(el => el > 10);. Si no encuentra coincidencias, devuelve undefined. Es útil cuando solo necesitas el primer resultado válido.
findIndex() devuelve el índice del primer elemento que cumple una condición o -1 si no lo encuentra:
let indice = arr.findIndex(el => el > 10);. Es útil cuando necesitas la posición en lugar del valor.
El método findLast() devuelve el último elemento que cumple una condición:
let resultado = arr.findLast(el => el > 10);. Si no hay coincidencias, devuelve undefined. Es útil cuando buscas el último valor válido.
findLastIndex() devuelve el índice del último elemento que cumple una condición o -1 si no lo encuentra:
let indice = arr.findLastIndex(el => el > 10);. Es útil cuando necesitas la posición del último elemento que cumple la condición.
find() devuelve el primer objeto que cumple una condición:
let obj = arr.find(el => el.id === 3);. findIndex() devuelve su índice:
let indice = arr.findIndex(el => el.id === 3);. Son útiles para buscar en arrays de objetos.
ARTÍCULOS RELACIONADOS
- ¿Cómo se declara un array en JavaScript? Con ejemplos.
- Métodos arrays en JavaScript: ¿Qué son y cuáles son? Con ejemplos!
- ¿Cómo quitar y agregar elementos a un array en JavaScript? Con ejemplos
- ¿Cómo iterar un array en JavaScript? Diferentes formas y ejemplos
- Desestructuración de arrays en JavaScript: ¿Que es y como usar?
