Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Arrays en JS — Ejemplo 3</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: 4px; text-transform: uppercase; }
        h3 { margin: 18px 0 4px; font-size: 15px; color: #333; }
        .badge { display: inline-block; background: #F7DF1E; color: #333; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: bold; margin-right: 6px; }
    </style>
</head>
<body>

<h2>Arrays — map(), filter() y reduce()</h2>

<h3><span class="badge">map()</span> Transformar cada elemento</h3>
  <div class="bloque"><div class="label">numeros → dobles</div><div id="r1"></div></div>
  <div class="bloque"><div class="label">nombres → capitalizados</div><div id="r2"></div></div>
  <div class="bloque"><div class="label">productos → solo nombres</div><div id="r3"></div></div>

<h3><span class="badge">filter()</span> Filtrar elementos</h3>
  <div class="bloque"><div class="label">numeros pares</div><div id="r4"></div></div>
  <div class="bloque"><div class="label">productos con stock</div><div id="r5"></div></div>
  <div class="bloque"><div class="label">productos precio > 100</div><div id="r6"></div></div>

<h3><span class="badge">reduce()</span> Reducir a un valor</h3>
  <div class="bloque"><div class="label">suma total</div><div id="r7"></div></div>
  <div class="bloque"><div class="label">valor del inventario</div><div id="r8"></div></div>
  <div class="bloque"><div class="label">producto más caro</div><div id="r9"></div></div>

<h3>Encadenar métodos</h3>
  <div class="bloque"><div class="label">tech disponibles, ordenados por precio</div><div id="r10"></div></div>

// ── map() ─────────────────────────────────────────────────────────────
    const dobles = numeros.map(n => n * 2);
    document.getElementById("r1").textContent =
        `[${numeros}]  →  [${dobles}]`;

const capitalizados = nombres.map(n => n[0].toUpperCase() + n.slice(1));
    document.getElementById("r2").textContent =
        `[${nombres}]  →  [${capitalizados}]`;

const soloNombres = productos.map(p => p.nombre);
    document.getElementById("r3").textContent =
        `[${soloNombres.join(", ")}]`;

// ── filter() ──────────────────────────────────────────────────────────
    const pares = numeros.filter(n => n % 2 === 0);
    document.getElementById("r4").textContent =
        `[${numeros}]  →  [${pares}]`;

const conStock = productos.filter(p => p.stock > 0).map(p => p.nombre);
    document.getElementById("r5").textContent =
        `[${conStock.join(", ")}]`;

const caros = productos.filter(p => p.precio > 100).map(p => `${p.nombre}($${p.precio})`);
    document.getElementById("r6").textContent =
        `[${caros.join(", ")}]`;

// ── reduce() ──────────────────────────────────────────────────────────
    const suma = numeros.reduce((acc, n) => acc + n, 0);
    document.getElementById("r7").textContent =
        `[${numeros}].reduce(sum) = ${suma}`;

const inventario = productos.reduce((acc, p) => acc + p.precio * p.stock, 0);
    document.getElementById("r8").textContent =
        `Total valor inventario: $${inventario}`;

const masCaro = productos.reduce((max, p) => p.precio > max.precio ? p : max, productos[0]);
    document.getElementById("r9").textContent =
        `${masCaro.nombre} — $${masCaro.precio}`;

// ── Encadenar ─────────────────────────────────────────────────────────
    const techDisp = productos
        .filter(p => p.categoria === "tech" && p.stock > 0)
        .sort((a, b) => a.precio - b.precio)
        .map(p => `${p.nombre}($${p.precio})`);
    document.getElementById("r10").textContent =
        `[${techDisp.join(", ")}]`;
  </script>

</body>
</html>