Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Arrays en JS — Ejemplo 2</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; }
        .label  { font-size: 11px; color: #888; font-weight: bold; margin-bottom: 6px; text-transform: uppercase; }
        ul { margin: 0; padding-left: 18px; font-family: monospace; font-size: 14px; }
        li { margin: 2px 0; }
        h3 { margin: 18px 0 4px; font-size: 15px; color: #333; }
    </style>
</head>
<body>

<h2>Arrays en JavaScript — Recorrer</h2>

<h3>for clásico</h3>
  <div class="bloque"><div class="label">for (let i = 0; i &lt; arr.length; i++)</div><ul id="r1"></ul></div>

<h3>for...of — el más limpio</h3>
  <div class="bloque"><div class="label">for (const fruta of frutas)</div><ul id="r2"></ul></div>

<h3>forEach — con índice</h3>
  <div class="bloque"><div class="label">frutas.forEach((fruta, i) => ...)</div><ul id="r3"></ul></div>

<h3>Recorrer array de objetos</h3>
  <div class="bloque"><div class="label">productos — for...of</div><ul id="r4"></ul></div>

<h3>Buscar dentro del array</h3>
  <div class="bloque"><div class="label">includes, indexOf, find</div><ul id="r5"></ul></div>

// for clásico
    const lista1 = document.getElementById("r1");
    for (let i = 0; i < frutas.length; i++) {
        const li = document.createElement("li");
        li.textContent = `[${i}] ${frutas[i]}`;
        lista1.appendChild(li);
    }

// for...of
    const lista2 = document.getElementById("r2");
    for (const fruta of frutas) {
        const li = document.createElement("li");
        li.textContent = fruta;
        lista2.appendChild(li);
    }

// forEach con índice
    const lista3 = document.getElementById("r3");
    frutas.forEach((fruta, i) => {
        const li = document.createElement("li");
        li.textContent = `${i + 1}. ${fruta}`;
        lista3.appendChild(li);
    });

// Array de objetos
    const productos = [
        { nombre: "Laptop",  precio: 1200, stock: 5 },
        { nombre: "Mouse",   precio: 25,   stock: 0 },
        { nombre: "Teclado", precio: 75,   stock: 3 },
        { nombre: "Monitor", precio: 450,  stock: 2 },
    ];

// Buscar
    const lista5 = document.getElementById("r5");
    const resultados = [
        `frutas.includes("uva")         → ${frutas.includes("uva")}`,
        `frutas.includes("mango")       → ${frutas.includes("mango")}`,
        `frutas.indexOf("pera")         → ${frutas.indexOf("pera")}`,
        `frutas.indexOf("mango")        → ${frutas.indexOf("mango")} (no encontrado)`,
        `productos.find(p => p.stock === 0)?.nombre → "${productos.find(p => p.stock === 0)?.nombre}"`,
    ];
    resultados.forEach(r => {
        const li = document.createElement("li");
        li.textContent = r;
        lista5.appendChild(li);
    });
  </script>

</body>
</html>