HOWTO · JavaScript
Obtenga el primer elemento de un array en JavaScript
En este artículo, aprenderemos cómo obtener el primer elemento de un array en JavaScript.
En esta página
Los arrays de JavaScript usan índices que empiezan en cero, así que array[0] lee el primer elemento sin modificar el array. Si necesitas el primer elemento que cumpla una condición, usa find(); usa shift() solo si también quieres eliminar el primer elemento.
Obtener el primer elemento de un array con array[0] en JavaScript
La primera posición de un array tiene el índice 0, la segunda tiene el índice 1, y así sucesivamente. Este ejemplo independiente lee el primer elemento y luego muestra el array para que puedas comprobar que el original no cambia.
const fruits = ["apple", "banana", "cherry"];
const firstFruit = fruits[0];
console.log(firstFruit);
console.log(fruits);
El ejemplo muestra:
apple
[ 'apple', 'banana', 'cherry' ]
Si el array está vacío, array[0] devuelve undefined, así que comprueba que haya un elemento cuando tu código necesite un valor. Para buscar un elemento que cumpla una condición, usa el método find() del array en lugar de comprobar cada elemento por tu cuenta.
Obtener el primer elemento de un array mediante desestructuración en JavaScript
La desestructuración de arrays asigna el primer elemento a una variable. Por ejemplo, const [firstFruit] = fruits; lee el mismo valor que fruits[0] y no modifica fruits. Si el array está vacío, firstFruit vale undefined. Usa esta forma cuando asignar uno o varios de los primeros elementos a variables haga que el código sea más claro.
Usar find() para obtener el primer elemento coincidente de un array en JavaScript
Usa find() cuando un predicado determine qué elemento buscas. El método comprueba los elementos en orden y devuelve el primero para el que el predicado sea verdadero. Si no hay ninguno que cumpla la condición, el resultado es undefined; contempla esa posibilidad antes de usarlo.
Por ejemplo, const firstLongWord = words.find(word => word.length > 5); selecciona la primera palabra que tenga más de cinco caracteres. Si quieres el primer elemento sin importar su valor, basta con array[0]. No hay una referencia en español; el enlace lleva a la referencia en inglés: referencia de JavaScript sobre arrays y find.
Usar shift() para obtener y eliminar el primer elemento de un array en JavaScript
Llama a shift() sin argumentos para obtener y eliminar el primer elemento. Devuelve el valor eliminado y modifica el array original. Si no hay elementos, devuelve undefined. Usa este método solo si quieres modificar el array; para leer el primer elemento sin cambiar el original, usa array[0] o la desestructuración.
Por qué filter() no suele ser la mejor opción para obtener la primera coincidencia
filter() devuelve un array nuevo con todos los elementos que cumplen el predicado. Recorre el array para reunir todas las coincidencias, por lo que hace más trabajo y crea otro array cuando solo necesitas un resultado. Para encontrar la primera coincidencia, find() es más claro: devuelve directamente ese elemento y se detiene al encontrarlo.
Puedes leer el primer resultado de una copia filtrada con matches[0], pero crear esa copia es innecesario si solo buscas una coincidencia. Si llamas a shift() en esa copia, eliminas un elemento de la copia, no del array original. Usa filter() cuando realmente necesites todas las coincidencias.
