Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Bucles en JS — Ejemplo 3</title>
    <style>
        body  { font-family: Arial, sans-serif; padding: 20px; background: #fff; max-width: 650px; }
        h3    { margin: 20px 0 8px; font-size: 15px; color: #333; }
        .bloque { background: #f9f9f9; border-left: 4px solid #F7DF1E; padding: 10px 14px; margin: 8px 0; border-radius: 0 6px 6px 0; font-size: 14px; }
        .label  { font-size: 11px; color: #888; font-weight: bold; margin-bottom: 4px; text-transform: uppercase; }
        table { border-collapse: collapse; width: 100%; margin: 6px 0; }
        th    { background: #F7DF1E; color: #333; padding: 6px 10px; text-align: left; font-size: 12px; }
        td    { padding: 6px 10px; border-bottom: 1px solid #eee; font-size: 13px; font-family: monospace; }
        ul { margin: 0; padding-left: 18px; font-family: monospace; }
        li { margin: 2px 0; }
    </style>
</head>
<body>

<h2>Bucles — for...of y for...in</h2>

<h3>for...of en arrays</h3>
  <div class="bloque">
    <div class="label">for (const fruta of frutas)</div>
    <ul id="r1"></ul>
  </div>

<h3>for...of con entries() — índice + valor</h3>
  <div class="bloque">
    <div class="label">for (const [i, fruta] of frutas.entries())</div>
    <ul id="r2"></ul>
  </div>

<h3>for...of en strings</h3>
  <div class="bloque">
    <div class="label">for (const letra of "JavaScript")</div>
    <div id="r3"></div>
  </div>

<h3>for...in en objetos</h3>
  <div class="bloque">
    <div class="label">for (const clave in persona)</div>
    <table id="r4"></table>
  </div>

<h3>Object.keys / values / entries</h3>
  <div class="bloque">
    <div class="label">métodos de Object</div>
    <ul id="r5"></ul>
  </div>

<h3>Iterar array de objetos con for...of</h3>
  <div class="bloque">
    <div class="label">for (const p of productos)</div>
    <table id="r6"></table>
  </div>

// for...of en array
    const frutas = ["manzana", "naranja", "uva", "pera", "kiwi"];
    const lista1 = document.getElementById("r1");
    for (const fruta of frutas) {
        const li = document.createElement("li");
        li.textContent = fruta;
        lista1.appendChild(li);
    }

// for...of con entries()
    const lista2 = document.getElementById("r2");
    for (const [i, fruta] of frutas.entries()) {
        const li = document.createElement("li");
        li.textContent = `[${i}] ${fruta}`;
        lista2.appendChild(li);
    }

// for...of en string
    const letras = [];
    for (const letra of "JavaScript") {
        letras.push(letra);
    }
    document.getElementById("r3").textContent = letras.join(" · ");

// for...in en objeto
    const persona = {
        nombre:    "Ana García",
        edad:      28,
        ciudad:    "Córdoba",
        profesion: "Docente",
        activa:    true,
    };

// Object.keys / values / entries
    const lista5 = document.getElementById("r5");
    const claves  = Object.keys(persona);
    const valores = Object.values(persona);
    const pares   = Object.entries(persona);

[
        `Object.keys(persona)   → [${claves.join(", ")}]`,
        `Object.values(persona) → [${valores.join(", ")}]`,
        `Object.entries(persona) → ${pares.length} pares clave/valor`,
    ].forEach(txt => {
        const li = document.createElement("li");
        li.textContent = txt;
        lista5.appendChild(li);
    });

// Array de objetos con for...of
    const productos = [
        { nombre: "Laptop",    precio: 1200, categoria: "tech",   stock: 5 },
        { nombre: "Mouse",     precio: 25,   categoria: "tech",   stock: 0 },
        { nombre: "Silla",     precio: 350,  categoria: "mueble", stock: 3 },
        { nombre: "Monitor",   precio: 450,  categoria: "tech",   stock: 2 },
        { nombre: "Escritorio",precio: 280,  categoria: "mueble", stock: 0 },
    ];

</body>
</html>