Volver
Ctrl+Space
◑
Copiar
Descargar
Restaurar
Ejecutar
Ctrl+Enter
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Arrays en JS — Ejemplo 1</title> <style> body { font-family: Arial, sans-serif; padding: 20px; background: #fff; } .bloque { background: #f9f9f9; border-left: 4px solid #F7DF1E; padding: 10px 14px; margin: 8px 0; border-radius: 0 6px 6px 0; font-family: monospace; font-size: 14px; } .label { font-size: 11px; color: #888; font-weight: bold; font-family: Arial; margin-bottom: 3px; text-transform: uppercase; } h3 { margin: 18px 0 4px; font-size: 15px; color: #333; } </style> </head> <body> <h2>Arrays en JavaScript — Crear y acceder</h2> <h3>Crear arrays</h3> <div class="bloque"><div class="label">frutas</div><div id="r1"></div></div> <div class="bloque"><div class="label">numeros</div><div id="r2"></div></div> <div class="bloque"><div class="label">mixto (distintos tipos)</div><div id="r3"></div></div> <h3>Acceder por índice</h3> <div class="bloque"><div class="label">frutas[0]</div><div id="r4"></div></div> <div class="bloque"><div class="label">frutas[2]</div><div id="r5"></div></div> <div class="bloque"><div class="label">frutas.at(-1) — último</div><div id="r6"></div></div> <div class="bloque"><div class="label">frutas.length</div><div id="r7"></div></div> <h3>Modificar elementos</h3> <div class="bloque"><div class="label">frutas[1] = "mango" → frutas</div><div id="r8"></div></div> <h3>Agregar y quitar</h3> <div class="bloque"><div class="label">push("kiwi") → frutas</div><div id="r9"></div></div> <div class="bloque"><div class="label">pop() devuelve</div><div id="r10"></div></div> <div class="bloque"><div class="label">unshift("melón") → frutas</div><div id="r11"></div></div> <div class="bloque"><div class="label">shift() devuelve</div><div id="r12"></div></div> <div class="bloque"><div class="label">frutas final</div><div id="r13"></div></div> <script> // Arrays en JavaScript - Ejemplo 1: Crear y acceder const frutas = ["manzana", "naranja", "uva"]; const numeros = [10, 20, 30, 40, 50]; const mixto = ["Ana", 28, true, null, 3.14]; document.getElementById("r1").textContent = JSON.stringify(frutas); document.getElementById("r2").textContent = JSON.stringify(numeros); document.getElementById("r3").textContent = JSON.stringify(mixto); document.getElementById("r4").textContent = frutas[0]; document.getElementById("r5").textContent = frutas[2]; document.getElementById("r6").textContent = frutas.at(-1); document.getElementById("r7").textContent = frutas.length; // Modificar un elemento frutas[1] = "mango"; document.getElementById("r8").textContent = JSON.stringify(frutas); // push / pop frutas.push("kiwi"); document.getElementById("r9").textContent = JSON.stringify(frutas); const eliminado = frutas.pop(); document.getElementById("r10").textContent = `"${eliminado}"`; // unshift / shift frutas.unshift("melón"); document.getElementById("r11").textContent = JSON.stringify(frutas); const primero = frutas.shift(); document.getElementById("r12").textContent = `"${primero}"`; document.getElementById("r13").textContent = JSON.stringify(frutas); </script> </body> </html>