JavaScript: obtener el último elemento de la lista

En este tutorial, veremos cómo obtener el último elemento en una colección de JavaScript, como una matriz o una lista, con ejemplos prácticos y comparaciones.

Introducción

Obtener el último elemento de una lista/matriz es una operación común. En este tutorial, veremos cómo obtener el último elemento en una matriz/lista de JavaScript.

JavaScript es un lenguaje débilmente tipificado o sin tipificar, lo que significa que no es necesario declarar el tipo de variable antes de usarla, ya que JavaScript determina el tipo leyendo el valor de la variable. .

Se evalúa var x = "algo" y se asigna x a un tipo de cadena. El mismo proceso se aplica a las listas: no necesita definir el tipo de una lista, simplemente puede completar la lista con valores.

Una lista se define poniendo los elementos entre corchetes ([]), donde los elementos pueden ser heterogéneos (no tienen que ser del mismo tipo):

1
var myList = ["Peter", "Smith", 25, 23, "Random String", 10]

JavaScript tiene muchos métodos integrados que se pueden usar para manipular listas como esta. Estos son los que usaremos para obtener el último elemento.

Obtenga el último elemento usando longitud

El atributo longitud de una lista denota el número de elementos en una lista:

1
console.log(myList.length)

La indexación de elementos en matrices/listas en JavaScript es muy similar a otros lenguajes. Podemos acceder a un elemento, en función de su índice, pasándolo entre corchetes [], haciendo referencia a la matriz. El último elemento tiene el índice longitud-1.

Dado que el campo longitud solo devuelve el valor guardado de los elementos, esta es una operación rápida, eficiente y económica. La mejor manera de obtener el último elemento de una matriz/lista de JavaScript es:

1
2
var lastElement = myList[myList.length - 1];
console.log(lastElement);

Esto resulta en:

1
10

Obtenga el último elemento usando pop()

El método pop() devuelve el último elemento de una colección, pero lo elimina durante el proceso. Sin embargo, si usamos el operador spread de ES6, podemos evitar esta funcionalidad copiando temporalmente la lista en la memoria y ejecutando pop() en la copia, manteniendo intacta la lista original.

El método pop()

Vamos a pop() el último elemento de la lista:

1
2
3
var lastElement = myList.pop();
console.log(lastElement)
console.log(myList)

Esto da como resultado que la lista se quede corta de ese elemento:

1
2
10
["Peter", "Smith", 25, 23, "Random String"]

Si no necesita que la lista original permanezca intacta, puede sacar elementos de ella, pero si necesita el original, puede hacer una copia y “pop()” de ella.

pop() con ES6' Operador de propagación

ES6 es la abreviatura de EcmaScript6, que es un estándar de JavaScript que se usa para facilitar la programación en JavaScript (para codificar menos, pero hacer más).

Fue fundado en 1997 y su primer gran avance fue en 2015, con el estándar ES6 (o EcmaScript2015). La última versión es la 11, desarrollada en 2020. Todas las versiones están destinadas a facilitar la codificación en JavaScript (con nuevas reglas de sintaxis, nuevas palabras clave, etc.).

La característica que podemos aprovechar aquí es el operador de propagación (...).

Entre otras funciones, el operador de propagación puede copiar listas/matrices:

1
[...myList]

Esto genera una nueva lista, con los mismos elementos que myList. Dicho esto, podemos sacar() de la nueva lista en lugar de la original:

1
2
console.log([...myList].pop())
console.log(myList)

Esto resulta en:

1
2
10
["Peter", "Smith", 25, 23, "Random String", 10]

Nota: Esto puede ser conveniente de escribir, pero no es la solución más barata, ya que copia una lista. Para listas pequeñas, no reduce mucho el rendimiento, pero con listas más largas, esta es una forma poco eficiente de simplemente obtener el último elemento.

Obtenga el último elemento usando slice()

El método slice(a, b) 'slices' la matriz desde el punto a hasta el punto b-1 - dado que a y b son números enteros. De una forma más matemática, puedes ver un segmento como este: [a, b) - el elemento en a está incluido, mientras que el elemento en b no lo está:

1
console.log(myList.slice(1, 4))

Esto da como resultado una porción de la matriz original:

1
["Smith", 25, 23]

El método slice() también acepta la indexación negativa, donde itera a través de la colección hacia atrás. Entonces, si slice (-4, -1), la iteración comenzará desde el tercer elemento desde atrás y terminará en uno antes del último (porque slice no incluye el punto b).

Esto nos permite simplemente incluir un último elemento, desde el final de la lista a través de slice():

1
console.log(myList.slice(-1))

Lo que resulta en:

1
[10]

Esto sigue siendo una matriz, por lo que para obtener este elemento accedemos a él con myList.slice(-1)[0], que devolverá nuestro elemento:

1
console.log(myList.slice(-1)[0])

Nota: slice() se usa mejor cuando desea recuperar los últimos N elementos de una matriz, en lugar de uno, ya que simplemente puede usar longitud-1 en su lugar.

Obtenga el último elemento usando reverse()

El método reverse() invierte la lista en el lugar. El último elemento se convertirá en el primero, y viceversa:

1
console.log(myList.reverse())

La salida será:

1
[10, 'Random String', 23, 25, 'Smith', 'Peter']

Ahora nuestro elemento es el primero, por lo que podemos acceder a él con myListReversed[0].

Nota: Invertir una matriz/lista también es una operación potencialmente muy costosa. Evite invertir la colección si lo único que desea hacer es acceder al último elemento. Si va a revertirlo de todos modos, puede acceder al elemento de esta manera. Si no, consulte el primer enfoque de usar longitud-1.

Conclusión

El método más barato, más eficiente y probablemente más intuitivo de estos es el primero - myList[myList.length()-1]. Esto es lo que usará la mayor parte del tiempo.

El uso de pop() elimina el elemento de la lista y lo devuelve. Si quiere eliminar el elemento, este es el enfoque que querrá utilizar, ya que, de lo contrario, tendrá que eliminar el elemento manualmente.

slice() nos da una porción, que es un gran enfoque si queremos obtener los últimos N elementos.

reverse() invierte la matriz en el lugar y debe evitarse si solo desea obtener un elemento. Sin embargo, si está invirtiendo la matriz de todos modos, esto no cuesta nada adicional.