Métodos de array
En la página de los colores, reescribir un hueco no movía la cantidad. Aquí hay una cesta con pan, leche y huevos. Una llamada puede hacer que haya más piezas o menos.
La cantidad puede moverse
Estas cinco llamadas retocan la lista que ya tienes en la mano, no un texto nuevo como las herramientas de cadena ni una función que guardaste tú en un objeto. push, pop, unshift, shift y splice son herramientas listas de la propia lista.
Cinco llamadas en una ficha
Deja la ficha junto a los ejemplos para no volver arriba cada vez. A menudo el valor que vuelve no es la cesta. Es un número, la pieza que se fue o una lista pequeña.
📊 Cinco llamadas de la lista
| Llamada | Dónde actúa | Qué vuelve | length |
|---|---|---|---|
push |
el final | la longitud nueva | crece por las piezas que pasaste |
pop |
el final | la pieza quitada | baja uno |
unshift |
el frente | la longitud nueva | crece por las piezas que pasaste |
shift |
el frente | la pieza quitada | baja uno |
splice |
un índice que eliges | una lista pequeña de lo quitado | baja según cuántos borras |
Las llamadas que añaden devuelven la longitud nueva como número, y las que sacan de un extremo devuelven la pieza misma. splice devuelve una lista pequeña incluso al borrar un solo hueco, y la palabra queda en el índice 0 de ese resultado.
Té al final
La cesta empieza con pan, leche y huevos. push coloca el té después de los huevos. El número que oyes al momento es cuántos huecos hay ahora.
let cart = ["bread", "milk", "eggs"];
let n = cart.push("tea");
console.log(n);
console.log(cart[3]);
console.log(cart.length);
n es 4, o sea la longitud nueva, no la palabra tea. El índice 3 guarda el té, y length también es 4 porque solo se añadió una pieza al final. Dos argumentos serían dos huecos de crecimiento. Aquí pasas uno para que el número se lea fácil.
let cart = ["bread", "milk", "eggs"];
let gone = cart.pop();
console.log(gone);
console.log(cart.length);
La última pieza se va
pop levanta los huevos del final y te devuelve esa cadena, y length pasa a 2. En la cesta quedan pan y luego leche. Esta llamada no devuelve la longitud nueva. Una cesta vacía devolvería undefined, y los ejemplos de esta página no arrancan vacíos.
let cart = ["bread", "milk", "eggs"];
let n = cart.unshift("tea");
console.log(n);
console.log(cart[0]);
console.log(cart[1]);
El frente es nuevo
unshift también devuelve 4, porque es la longitud nueva, y el índice 0 ahora es té. El pan se desliza al índice 1 sin que se reescriba un hueco. Cada pieza vieja da un paso hacia el final.
let cart = ["bread", "milk", "eggs"];
let gone = cart.shift();
console.log(gone);
console.log(cart[0]);
console.log(cart.length);
El frente se vacía
shift devuelve pan, es decir la pieza que se fue, no una longitud. Después el índice 0 es la leche y length vale 2. Los huevos siguen siendo los últimos. Solo se sientan ahora en el índice 1.
let cart = ["bread", "milk", "eggs"];
let removed = cart.splice(1, 1);
console.log(removed[0]);
console.log(cart.length);
console.log(cart[1]);
Un hueco que elegiste tú
El primer argumento es el índice de inicio y el segundo dice cuántos huecos borrar. Sale la leche, y removed es una lista de un hueco, así que removed[0] es leche y la llamada misma no es la cadena leche. length pasa a 2 y el índice 1 son los huevos, porque el pan se quedó en 0 y los huevos cerraron el hueco. Si pasas 0 como cantidad a borrar, insertas sin borrar. Esa forma puede esperar.
La página imprime la longitud nueva
Añade el té con push. Luego escribe length en el párrafo. La línea debe ser la cantidad, no la lista de la compra.
<!DOCTYPE html>
<html>
<head>
<title>array-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let cart = ["bread", "milk", "eggs"];
cart.push("tea");
let box = document.getElementById("line");
box.textContent = cart.length;
</script>
</body>
</html>
El párrafo muestra 4. Cambia la cadena empujada de té a mermelada y recarga; la línea sigue en 4 porque sigues añadiendo una pieza. Cambió la palabra, no la cantidad. Pan, leche y huevos se quedan delante de lo que metiste con push.
Prueba con una cesta nueva
- Con
pushpon té detrás de pan, leche y huevos, y lee a la vez el número devuelto y el índice 3. - Llama
popuna vez, lee la palabra quitada y la longitud nueva, luego conunshiftpon el té delante y mira el índice 0 y el 1. - Llama
shiftuna vez, lee la palabra que se fue y el nuevo índice 0, luego hazsplicedesde el índice 1 borrando un hueco y ponremoved[0]junto a la longitud. - En la página haz
pushdel té, recarga, lee la línea, cambia el té por mermelada y recarga otra vez.
Donde se pierden puntos
- Querías añadir un hueco y escribiste
cart[1] = "tea", o faltaron los paréntesis depushypop - Tomaste el valor de
poppor la longitud nueva - Esperabas que
splicedevolviera la cadena leche sola y no una lista - Creíste que el índice 0 seguía siendo pan tras
unshift, o mezclaste esta página con un recorrido de cada pieza y una búsqueda por valor
Qué te llevas
- Estas llamadas retocan la misma lista
pushyunshiftdevuelven la longitud nueva, ypopyshiftla pieza que se fuesplicedevuelve una lista pequeña de lo quitado- El párrafo puede mostrar solo la longitud después de
push - Lo siguiente es recorrer la lista, y buscar por valor viene después
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior