Arrays en JavaScript
La página anterior guardó los datos como un texto que después se puede enviar. Aquí la lista sigue viva dentro del script y puedes reescribir sus huecos. Tres nombres de color quedan en orden. Señalas cada hueco con un número, no con una clave.
Una estantería, no una nota
Los corchetes arman la lista mientras el script corre, y cada valor se sienta en un hueco numerado. Esto no es texto JSON esperando a parse, ni un objeto con campos que tienen nombre. El sentido de esta forma está en el orden de los huecos.
Nombre frente a número
📊 Objeto con nombre frente a array numerado
| Pregunta | Objeto | Array |
|---|---|---|
| Cómo señalas | una clave como name | un índice como 0 |
| Primer color | no es una lista de colores | colors[0] |
| Cuántos | cuentas las claves tú | length |
| Orden | no es el punto | es el punto |
| Tras la página de JSON | una nota sobre datos | una lista viva en el script |
Un objeto pregunta qué nombre quieres, y un array pregunta qué puesto quieres. El primer color es colors[0], sin clave. Meter un objeto dentro de un hueco es una costumbre posterior, no esta página.
Corchetes, no llaves
Las llaves abren un objeto y los corchetes abren un array. Tres nombres de color son tres huecos seguidos. La taza de la lección anterior era un campo con nombre, no una lista. Si solo quieres una lista, quédate con los corchetes.
let colors = ["red", "green", "blue"];
console.log(colors[0]);
El primer hueco es el índice 0
colors[0] imprime red. La cuenta empieza en cero, no en uno. Si empiezas en uno, te saltas el rojo. El segundo hueco es green y el tercero es blue.
let colors = ["red", "green", "blue"];
console.log(colors.length);
console.log(colors[colors.length - 1]);
length cuenta los huecos
colors.length vale 3 porque hay tres nombres guardados, y el último hueco colors[colors.length - 1] es blue. Restas uno porque el primer índice es cero, no uno. length es una propiedad y no lleva paréntesis de llamada.
let colors = ["red", "green", "blue"];
colors[1] = "gold";
console.log(colors[1]);
console.log(colors.length);
Sustituir no cambia la cantidad
colors[1] = "gold" escribe encima de green. La lectura siguiente de ese hueco imprime gold. length se queda en 3. Cambiaste un hueco que ya estaba, no añadiste uno nuevo. Añadir y quitar huecos es la lección de los métodos de array.
let colors = ["red", "green", "blue"];
console.log(colors[9]);
console.log(colors.length);
Un índice vacío no es un hueco nuevo
colors[9] no guarda nada, así que la lectura es undefined y length sigue en 3. Leer un hueco vacío no alarga la lista. Escribir más allá del final sí agranda la longitud y deja huecos vacíos, y no es la herramienta de esta página.
let bag = ["red", 12, true];
console.log(bag[1]);
console.log(typeof bag[0]);
Un solo tipo se lee mejor
Un hueco puede guardar un texto, un número o un boolean. bag[1] imprime 12 y typeof bag[0] es string. Una lista de colores se entiende mejor que una bolsa mixta. El lenguaje no prohíbe la mezcla.
Muestra el primer color en la página
Lee el índice 0 y escribe ese texto en el párrafo. Los otros dos colores se quedan en la lista.
<!DOCTYPE html>
<html>
<head>
<title>arrays — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let colors = ["red", "green", "blue"];
let box = document.getElementById("line");
box.textContent = colors[0];
</script>
</body>
</html>
El párrafo muestra red. Cambia solo el primer texto dentro de los corchetes y recarga, y la línea sigue. Los otros dos colores siguen guardados y no se escriben en el párrafo.
Pasos de práctica
- Crea los tres colores y lee el índice 0, luego lee la longitud y llega al último color con la longitud menos uno.
- Pon el índice 1 en
goldy lee ese hueco y la longitud. - Lee el índice 9 y confirma que la longitud sigue en 3, y en la bolsa mixta mira el número y el tipo del primer hueco.
- En la demo HTML cambia solo el primer color, recarga y lee el párrafo.
Tropiezos frecuentes
- Contar desde 1 y saltarte el primer color, y llamar a
lengthcon paréntesis como si fuera una función - Tratar el array como texto
JSONy pasarlo aparse - Esperar que solo leer un índice vacío haga crecer
length, o que sustituir un hueco signifique añadir un elemento - Buscar métodos de array en esta página
Resumen
- Un array es una lista viva dentro del script y los corchetes la crean
- El índice 0 es el primer elemento
lengthcuenta huecos y no lleva paréntesis- Escribir en un índice que ya existe sustituye ese hueco, y leer más allá del final es
undefinedsin que cambie la longitud - El primer elemento puede llenar una línea de la página, y la siguiente lección son los métodos de array para añadir y quitar
🧠 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