Arrays En Js

<h3 class="r-fit-text">JavaScript</h3>

<h3 class="r-fit-text">Métodos de arrays</h3>

---

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5em">
<div class="card">
  <h3>Estáticos</h3>
  <div style="display: flex; flex-direction: column; align-items: flex-start;">
  <div style="display: flex; align-items: center; gap: .5em"><i class="fa-solid fa-arrow-right-to-bracket"></i> Array.from()</div>
  <div style="display: flex; align-items: center; gap: .5em"><i class="fa-solid fa-arrow-right-to-bracket"></i> Array.fromAsync()</div>
  <div style="display: flex; align-items: center; gap: .5em"><i class="fa-solid fa-arrow-right-to-bracket"></i> Array.isArray()</div>
  <div style="display: flex; align-items: center; gap: .5em"><i class="fa-solid fa-arrow-right-to-bracket"></i> Array.of()</div>
  </div>
</div>
<div class="card">
  <h3>Comprobaciones</h3>
</div>
<div class="card">
  <h3>Eliminar</h3>
</div>
</div>

---

<h1 class="text-center">
  <i class="fa-solid fa-cubes" style="color: rgb(244, 232, 63)"></i><br/>
  Métodos estáticos
</h1>

Estos métodos pertenecen a la clase <span class="warning">Array</span>, por lo que se utilizan directamente como <code>Array.metodo()</code> y no sobre un array existente. Permiten <strong>crear arrays</strong> o <strong>comprobar si un valor es un array</strong>.

<h2 class="text-center"><code>Array.<span class="warning">isArray</span>(<span class="hljs-title function_">valor</span>):<span class="hljs-literal">Boolean</span></code><br/><small>· <span class="warning">Comprobar si es un array</span> ·</small></h2>

> Usa `Array.isArray()` para comprobar arrays
>
> <pre data-cc-window="false" data-cc-button="false">
> <code class="language-js">if (Array.isArray(valor)) {
>    valor.forEach(item => console.log(item));
> }</code></pre>

<h3 align="center">· <span class="warning">Playground</span> ·</h3>

```js [] run
const valor = ["🍎", "🍌", "🍇"];

if (Array.isArray(valor)) {
  console.log("Es un array.");
  valor.forEach(item => console.log(item));
} else {
  console.log("No es un array.");
}
```

/* botón estilo inline tipo @ */
.console-restart{
  position: absolute;
  top: 10px;
  right: 40px;

display: inline-flex;
  align-items: center;
  gap: 6px;

padding: 6px 10px;
  font-size: 12px;

background: rgba(255,255,255,0.08);
  color: #eaeaea;

border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;

cursor: pointer;

backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

transition: all 0.2s ease;
}

.console-restart:hover{
  background: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}

.console-restart:active{
  transform: translateY(0px) scale(0.96);
}
</style>
<div class="console-wrapper">
<iframe
  class="console-frame"
  id="console-demo"
  src="https://mcherrera.dev/mc-eruda-monokai-pro"
  style="width:100%;height:290px;border:0;border-radius:8px;">
</iframe>
<button class="console-restart" type="button">
  🔄 Reiniciar
</button>
</div>

</div>

<h2 class="text-center">
  <code>
    Array.<span class="warning">from</span>(<span class="hljs-title function_">iterable</span>):<span class="hljs-literal">Array</span>
  </code>
  <br/>
  <small>· <span class="warning">Crear un array desde un iterable</span> ·</small>
</h2>

> Convierte un iterable en un array real.
>
> <pre data-cc-window="false" data-cc-button="false">
> <code class="language-js">const letras = Array.from("JS");
> letras.forEach(l => console.log(l));</code></pre>

<h3 align="center">· <span class="warning">Playground</span> ·</h3>

```js [] run
const a = Array.from("JS");
const b = Array.from({ length: 5 }, (_, i) => i + 1);

console.log(a);
console.log(b);
```
</div>

/* botón estilo inline tipo @ */
.console-restart{
  position: absolute;
  top: 10px;
  right: 40px;

display: inline-flex;
  align-items: center;
  gap: 6px;

padding: 6px 10px;
  font-size: 12px;

background: rgba(255,255,255,0.08);
  color: #eaeaea;

border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;

cursor: pointer;

backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

transition: all 0.2s ease;
}

.console-restart:hover{
  background: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}

.console-restart:active{
  transform: translateY(0px) scale(0.96);
}
</style>
<div class="console-wrapper">
<iframe
  class="console-frame"
  id="console-Arrayfrom"
  src="https://mcherrera.dev/mc-eruda-monokai-pro"
  style="width:100%;height:290px;border:0;border-radius:8px;">
</iframe>
<button class="console-restart" type="button">
  🔄 Reiniciar
</button>
</div>

</div>

---

<h1 class="text-center"><i class="fa-solid fa-plus" style="color: rgb(10, 141, 67)"></i><br/>Añadir elementos</h1>

Estos métodos sirven para **insertar nuevos elementos** en un array, ya sea al inicio o al final, modificando el array original.

<h2 class="text-center">
  <code>
    Array.prototype.<span class="warning">push</span>(<span class="hljs-title function_">items</span>):<span class="hljs-literal">Number</span>
  </code>
  <br/>
  <small>· <span class="warning">Agregar elementos al final del array</span> ·</small>
</h2>

> Agrega uno o más elementos al final del array.
>
> <pre data-cc-window="false" data-cc-button="false">
> <code>const frutas = ["🍎", "🍌"];
>
> frutas.push("🍇");
>
> frutas.forEach(f => console.log(f));</code></pre>

<h3 align="center">· <span class="warning">Playground</span> ·</h3>

<div>

```javascript [1,3,5,7] run
const mascotas = ["🐶", "🐱"];

console.log("Antes:", mascotas);

mascotas.push("🐰", "🐹");

console.log("Después:", mascotas);
```

<br>
<div style="display:flex; justify-content: flex-start; gap:0.3em; flex-wrap: wrap;">
  <a href="javascript:void(0)"
      class="nav-btn "
      onclick="Reveal.toggleOverview();">
      <i class="fa-solid fa-layer-group"></i>
  </a>
  
  
  <a class="nav-btn" onclick="Reveal.down()">
      UNSHIFT
      <i class="fa-solid fa-arrow-down"></i>
  </a>
  
  
  
  <a class="nav-btn" onclick="Reveal.right()">
      ELIMINAR
      <i class="fa-solid fa-arrow-right"></i>
  </a>
  
</div>

</div>

/* botón estilo inline tipo @ */
.console-restart{
  position: absolute;
  top: 10px;
  right: 40px;

display: inline-flex;
  align-items: center;
  gap: 6px;

padding: 6px 10px;
  font-size: 12px;

background: rgba(255,255,255,0.08);
  color: #eaeaea;

border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;

cursor: pointer;

backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

transition: all 0.2s ease;
}

.console-restart:hover{
  background: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}

.console-restart:active{
  transform: translateY(0px) scale(0.96);
}
</style>
<div class="console-wrapper">
<iframe
  class="console-frame"
  id="console-ArrayPush"
  src="https://mcherrera.dev/mc-eruda-monokai-pro"
  style="width:100%;height:290px;border:0;border-radius:8px;">
</iframe>
<button class="console-restart" type="button">
  🔄 Reiniciar
</button>
</div>

</div>

<h2 class="text-center">
  <code>
    Array.prototype.<span class="warning">unshift</span>(<span class="hljs-title function_">items</span>):<span class="hljs-literal">Number</span>
  </code>
  <br/>
  <small>· <span class="warning">Agregar elementos al inicio del array</span> ·</small>
</h2>

> Agrega uno o más elementos al inicio del array.
>
> <pre data-cc-window="false" data-cc-button="false">
> <code>const notificaciones = ["📧 Correo", "🔔 Recordatorio"];
>
> notificaciones.unshift("🚨 Alerta urgente");
>
> notificaciones.forEach(n => console.log(n));</code></pre>

<h3 align="center">· <span class="warning">Playground</span> ·</h3>

<div>

```javascript [1,3,5,7] run
const planetas = ["🌍", "🪐"];

console.log("Antes:", planetas);

planetas.unshift("☀️", "🌕");

console.log("Después:", planetas);
```

<br>
<div style="display:flex; justify-content: flex-start; gap:0.3em; flex-wrap: wrap;">
  <a href="javascript:void(0)"
      class="nav-btn "
      onclick="Reveal.toggleOverview();">
      <i class="fa-solid fa-layer-group"></i>
  </a>
  
  <a class="nav-btn" onclick="Reveal.up()">
      PUSH
      <i class="fa-solid fa-arrow-up"></i>
  </a>
  
  
  
  
  <a class="nav-btn" onclick="Reveal.right()">
      ELIMINAR
      <i class="fa-solid fa-arrow-right"></i>
  </a>
  
</div>

</div>

/* botón estilo inline tipo @ */
.console-restart{
  position: absolute;
  top: 10px;
  right: 40px;

display: inline-flex;
  align-items: center;
  gap: 6px;

padding: 6px 10px;
  font-size: 12px;

background: rgba(255,255,255,0.08);
  color: #eaeaea;

border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;

cursor: pointer;

backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

transition: all 0.2s ease;
}

.console-restart:hover{
  background: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}

.console-restart:active{
  transform: translateY(0px) scale(0.96);
}
</style>
<div class="console-wrapper">
<iframe
  class="console-frame"
  id="console-ArrayUnShift"
  src="https://mcherrera.dev/mc-eruda-monokai-pro"
  style="width:100%;height:290px;border:0;border-radius:8px;">
</iframe>
<button class="console-restart" type="button">
  🔄 Reiniciar
</button>
</div>

</div>

---

<h1 class="text-center"><i class="fa-solid fa-trash" style="color: rgb(230, 28, 69);"></i><br/>Eliminar elementos</h1>

Se utilizan para __remover elementos existentes__, ya sea al inicio, final o en posiciones específicas.

<h2><span class="warning">POP</span>: Eliminar el último</h2>

Este método elimina el último elemento del array y modifica el original.

<h3><span class="warning">Ejemplo</span>:</h3>

<div>

```javascript [] run
const carrito = ["🍎", "🥛", "🍞"];

console.log("Antes:", carrito);

const eliminado = animales.pop();

console.log("Eliminado:", eliminado);

console.log("Después:", carrito);
```
<br>
<div style="display:flex; justify-content: flex-start; gap:0.3em; flex-wrap: wrap;">
  <a href="javascript:void(0)"
      class="nav-btn "
      onclick="Reveal.toggleOverview();">
      <i class="fa-solid fa-layer-group"></i>
  </a>
  
  
  <a class="nav-btn" onclick="Reveal.down()">
      SHIFT
      <i class="fa-solid fa-arrow-down"></i>
  </a>
  
  
  
  <a class="nav-btn" onclick="Reveal.right()">
      FILTRAR Y BUSCAR
      <i class="fa-solid fa-arrow-right"></i>
  </a>
  
</div>

</div>

<h2><span class="warning">SHIFT</span>: Eliminar el primero</h2>

Este método elimina el primer elemento del array y desplaza los demás elementos hacia atrás.

<h3><span class="warning">Ejemplo</span>:</h3>

<div>

```js [] run
const animales = ["🐶", "🐱", "🐰"];

console.log("Antes:", animales);

const eliminado = animales.shift();

console.log("Eliminado:", eliminado);

console.log("Después:", animales);
```
<br>
<div style="display:flex; justify-content: flex-start; gap:0.3em; flex-wrap: wrap;">
  <a href="javascript:void(0)"
      class="nav-btn "
      onclick="Reveal.toggleOverview();">
      <i class="fa-solid fa-layer-group"></i>
  </a>
  
  <a class="nav-btn" onclick="Reveal.up()">
      POP
      <i class="fa-solid fa-arrow-up"></i>
  </a>
  
  
  <a class="nav-btn" onclick="Reveal.down()">
      SPLICE
      <i class="fa-solid fa-arrow-down"></i>
  </a>
  
  
  
  <a class="nav-btn" onclick="Reveal.right()">
      FILTRAR Y BUSCAR
      <i class="fa-solid fa-arrow-right"></i>
  </a>
  
</div>

</div>

<div class="card" style="display: flex; flex-direction: column;">
<span>["🐶", "🐱", "🐰"].</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>.<span class="hljs-title function_">shift</span>()</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span><span style="color: #f00">❌</span> 🐶</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>["🐱","🐰"]</span>
</div>
</div>
</div>

<h2><span class="warning">SPLICE</span>: Eliminar por posición</h2>

Este método elimina uno o varios elementos del array indicando la posición inicial y la cantidad de elementos que se eliminarán.

<h3><span class="warning">Ejemplo</span>:</h3>

<div>

```js [] run
const animales = ["🐶", "🐱", "🐰"];

console.log("Antes:", animales);

const eliminado = animales.splice(1, 1);

console.log("Eliminado:", eliminado);

console.log("Después:", animales);
```
<br>
<div style="display:flex; justify-content: flex-start; gap:0.3em; flex-wrap: wrap;">
  <a href="javascript:void(0)"
      class="nav-btn "
      onclick="Reveal.toggleOverview();">
      <i class="fa-solid fa-layer-group"></i>
  </a>
  
  <a class="nav-btn" onclick="Reveal.up()">
      SHIFT
      <i class="fa-solid fa-arrow-up"></i>
  </a>
  
  
  
  
  <a class="nav-btn" onclick="Reveal.right()">
      FILTRAR Y BUSCAR
      <i class="fa-solid fa-arrow-right"></i>
  </a>
  
</div>

</div>

<div style="display: flex; flex-direction: column; gap: 0.5rem">
<div class="card" style="display: flex; flex-direction: column;">
<span>["🐶" ,"🐱", "🐰"]</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>.<span class="hljs-title function_">splice</span>(1, 1)</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span><span style="color: #f00">❌</span> 🐱</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>["🐶", "🐰"]</span>
</div>

<div class="card-info" style="font-size: 0.9em">
["🐶","🐱","🐰"].splice(1)
<span style="color: #f00">❌</span> 🐱🐰<br>
Si no se indica la cantidad, se eliminarán todos desde esa posición
</div>
</div>
</div>

---

<h1 class="text-center"><i class="fa-solid fa-magnifying-glass" style="color:#2563eb;"></i><i class="fa-solid fa-filter" style="color:#f59e0b;"></i><br/> Filtrar y buscar</h1>

Permiten consultar información dentro del array sin modificarlo directamente o creando nuevos resultados.

<h2><span class="warning">INCLUDES</span>: Verificar existencia</h2>

Este método verifica si un valor existe dentro de un array o una cadena de texto, devolviendo <span class="text-glow">true</span> si lo encuentra y <span class="text-glow">false</span> si no está presente.

<h3><span class="warning">Ejemplo</span>:</h3>

<div>

```js [1,3-5,7-9] run
const frutas = ["🍎", "🍌", "🍇", "🍍"];

const existePlatano = frutas.includes("🍌");
const existeUva = frutas.includes("🍇");
const existeMango = frutas.includes("🥭");

console.log("🍌 ❓", existePlatano);
console.log("🍇 ❓", existeUva);
console.log("🥭 ❓", existeMango);
```
<br>
<div style="display:flex; justify-content: flex-start; gap:0.3em; flex-wrap: wrap;">
  <a href="javascript:void(0)"
      class="nav-btn "
      onclick="Reveal.toggleOverview();">
      <i class="fa-solid fa-layer-group"></i>
  </a>
  
  
  <a class="nav-btn" onclick="Reveal.down()">
      INDEXOF
      <i class="fa-solid fa-arrow-down"></i>
  </a>
  
  
  
  <a class="nav-btn" onclick="Reveal.right()">
      TRANSFORMAR
      <i class="fa-solid fa-arrow-right"></i>
  </a>
  
</div>

</div>

<div class="card" style="display: flex; flex-direction: column;">
<span>["🍎", "🍌", "🍇", "🍍"]</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>🔎 🍌 .<span class="hljs-title function_">includes</span>(🍌) ✅</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>🔎 🍇 .<span class="hljs-title function_">includes</span>(🍇) ✅</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>🔎 🥭 .<span class="hljs-title function_">includes</span>(🥭) <span style="color: #f00">❌</span></span>
</div>
</div>

<h2><span class="warning">INDEXOF</span>: Conocer la posición</h2>

Este método devuelve la posición ( índice ) de la primera aparición de un elemento dentro del array o cadena de texto, o __-1__ si no lo encuentra.

<h3><span class="warning">Ejemplo</span>:</h3>

<div>

```javascript run
const animales = ["🐶", "🐱", "🐭", "🐹", "🐰"];

const indicePerro = animales.indexOf("🐶");
const indiceGato = animales.indexOf("🐱");
const indiceLeon = animales.indexOf("🦁");

console.log(indicePerro); // 0
console.log(indiceGato);  // 1
console.log(indiceLeon);  // -1
```
<br>
<div style="display:flex; justify-content: flex-start; gap:0.3em; flex-wrap: wrap;">
  <a href="javascript:void(0)"
      class="nav-btn "
      onclick="Reveal.toggleOverview();">
      <i class="fa-solid fa-layer-group"></i>
  </a>
  
  <a class="nav-btn" onclick="Reveal.up()">
      INCLUDES
      <i class="fa-solid fa-arrow-up"></i>
  </a>
  
  
  <a class="nav-btn" onclick="Reveal.down()">
      FIND
      <i class="fa-solid fa-arrow-down"></i>
  </a>
  
  
  
  <a class="nav-btn" onclick="Reveal.right()">
      TRANSFORMAR
      <i class="fa-solid fa-arrow-right"></i>
  </a>
  
</div>

</div>

<div class="card" style="display: flex; flex-direction: column">
<span>["🐶","🐱","🐭","🐹","🐰"]</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>🐶❓ .<span class="hljs-title function_">indexof</span>(🐶) 📍 <span style="color: #f59e0b;">0</span></span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>🐱❓ .<span class="hljs-title function_">indexof</span>(🐱) 📍 <span style="color: #f59e0b;">1</span></span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>🦁❓ .<span class="hljs-title function_">indexof</span>(🦁) 📍 <span style="color: #f59e0b;">-1</span></span>
</div>
</div>

<h2><span class="warning">FIND</span>: Buscar el primer match</h2>

Este método devuelve el primer elemento de un array que cumpla con una condición, o __undefined__ si no encuentra ninguno.

<h3><span class="warning">Ejemplo</span>:</h3>

<div>

```javascript [] run
const productos = [
  { item: "⌨️", stock: 0 },
  { item: "🖱️", stock: 5 },
  { item: "🖥️", stock: 3 }
];

const disponible = productos.find(p => p.stock > 0 );

console.log("Primer match:", disponible);
```
<br>
<div style="display:flex; justify-content: flex-start; gap:0.3em; flex-wrap: wrap;">
  <a href="javascript:void(0)"
      class="nav-btn "
      onclick="Reveal.toggleOverview();">
      <i class="fa-solid fa-layer-group"></i>
  </a>
  
  <a class="nav-btn" onclick="Reveal.up()">
      INDEXOF
      <i class="fa-solid fa-arrow-up"></i>
  </a>
  
  
  <a class="nav-btn" onclick="Reveal.down()">
      FILTER
      <i class="fa-solid fa-arrow-down"></i>
  </a>
  
  
  
  <a class="nav-btn" onclick="Reveal.right()">
      TRANSFORMAR
      <i class="fa-solid fa-arrow-right"></i>
  </a>
  
</div>

</div>

<div class="card" style="display: flex; flex-direction: column;">
<span>[  { item:"⌨️", stock: 0 },</span>
<span>{ item:"🖱️", stock: 5 },</span>
<span>{ item:"🖥️", stock: 3 }  ]</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>.<span class="hljs-title function_">find</span>(i  => i.<span style="color: #ff8">stock > 0</span>)</span></span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>{ item:"⌨️", <span style="color: #f00">stock</span>: 0 } <span style="color: #f00">❌</span></span>
<span>{ <span style="color: #0f0">item</span>:"🖱️", <span style="color: #0f0">stock</span>: 5 } ✅</span>
</div>

</div>

<h2><span class="warning">FILTER</span>: Buscar todos los match</h2>

Este método crea un nuevo array con los elementos que cumplen una condición.

<h3><span class="warning">Ejemplo</span>:</h3>

<div>

```js [] run
const numeros = [10, 20, 55, 23];

function esPar(num) {
  return num % 2 === 0;
}

const pares = numbers.filter(esPar);

console.log(pares);
```
<br>
<div style="display:flex; justify-content: flex-start; gap:0.3em; flex-wrap: wrap;">
  <a href="javascript:void(0)"
      class="nav-btn "
      onclick="Reveal.toggleOverview();">
      <i class="fa-solid fa-layer-group"></i>
  </a>
  
  <a class="nav-btn" onclick="Reveal.up()">
      FIND
      <i class="fa-solid fa-arrow-up"></i>
  </a>
  
  
  
  
  <a class="nav-btn" onclick="Reveal.right()">
      TRANSFORMAR
      <i class="fa-solid fa-arrow-right"></i>
  </a>
  
</div>

</div>

<div class="card" style="display: flex; flex-direction: column;">
<span>[10, 20, 55, 23]</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>.<span class="hljs-title function_">filter</span>(<span class="hljs-keyword">esPar</span>)</span></span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span><span class="hljs-keyword">esPar</span> ? <span style="color: #ff8">num</span> % 2 = 0</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span style="text-align: left; padding-left: 1em">
<span style="display: flex; align-tems: center; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d="m10 17l5-5l-5-5z" />
</svg>
 10 % 2 = 0 ? ✅ -> [10]
</span>
<span style="display: flex; align-tems: center; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d="m10 17l5-5l-5-5z" />
</svg>
 20 % 2 = 0 ? ✅ -> [10, 20]
</span>
<span style="display: flex; align-tems: center; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d="m10 17l5-5l-5-5z" />
</svg>
 55 % 2 = 0 ? ❌ -> [10, 20]
</span>
<span style="display: flex; align-tems: center; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d="m10 17l5-5l-5-5z" />
</svg>
 23 % 2 = 0 ? ❌ -> [10, 20]
</span>
</span>
</div>

</div>

---

<h1 class="text-center"><i class="fa-solid fa-wand-magic-sparkles" style="color:#7c4dff;"></i>  <i class="fa-solid fa-repeat" style="color:#4f8cff;"></i><br/>Transformar y recorrer</h1>

Estos métodos permiten recorrer los elementos de un array, transformarlos y generar nuevos arreglos o resultados mediante funciones de procesamiento.

<h2><span class="warning">MAP</span>: Crear un nuevo array</h2>

Este método crea un nuevo array aplicando una función a cada elemento del array original, transformando sus valores sin modificar el original.

<h3><span class="warning">Ejemplo</span>:</h3>

<div>

```javascript [] run
const jedis = ["Anakin", "Luke", "Rey"];

// asignar sable
const conSable = jedis.map(jedi => {
  return `${jedi} usa ⚔️`
});

console.log(conSable);
```
<br>
<div style="display:flex; justify-content: flex-start; gap:0.3em; flex-wrap: wrap;">
  <a href="javascript:void(0)"
      class="nav-btn "
      onclick="Reveal.toggleOverview();">
      <i class="fa-solid fa-layer-group"></i>
  </a>
  
  
  <a class="nav-btn" onclick="Reveal.down()">
      FOREACH
      <i class="fa-solid fa-arrow-down"></i>
  </a>
  
  
  
  <a class="nav-btn" onclick="Reveal.right()">
      ORDENAR
      <i class="fa-solid fa-arrow-right"></i>
  </a>
  
</div>

</div>
<div class="card" style="display: flex; flex-direction: column; font-size: 0.9em">
<span>[<span class="hljs-string">"Anakin"</span>, <span class="hljs-string">"Luke"</span>, <span class="hljs-string">"Rey"</span>]</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>.<span class="hljs-title function_">map</span>(<span class="hljs-keyword">conSable</span>)</span></span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span><span class="hljs-keyword">conSable</span> ➜ <span style="color: #ff8">jedi</span> + usa ⚔️</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span style="text-align: left; padding-left: 0.6em;">
<span style="display: flex; align-tems: center; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d="m10 17l5-5l-5-5z" />
</svg>
 <span class="hljs-string">"Anakin"</span> ➜ <span class="hljs-string">"Anakin usa ⚔️"</span>
</span>
<span style="display: flex; align-tems: center; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d="m10 17l5-5l-5-5z" />
</svg>
 <span class="hljs-string">"Luke"</span> ➜ <span class="hljs-string">"Luke usa ⚔️"</span>
</span>
<span style="display: flex; align-tems: center; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d="m10 17l5-5l-5-5z" />
</svg>
 <span class="hljs-string">"Rey"</span> ➜ <span class="hljs-string">"Rey usa ⚔️"</span>
</span>
</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>[<span class="hljs-string">"Anakin usa ⚔️"</span>, <span class="hljs-string">"Luke ..."</span>, <span class="hljs-string">"Rey ..."</span>]</span>
</div>
</div>

<h2><span class="warning">FOREACH</span>: Recorrer un array</h2>

Este método recorre cada elemento del array y ejecuta una función ( callback ) a cada uno, sin crear un nuevo array.

<h3><span class="warning">Ejemplo</span>:</h3>

<div>

```javascript run
const plantas = ["🌵", "🌿", "🌷"];

function mostrar(item, index) {
  console.log(index, item);
}

// Recorrer cada elemento del arreglo
plantas.forEach(mostrar);
```
<br>
<div style="display:flex; justify-content: flex-start; gap:0.3em; flex-wrap: wrap;">
  <a href="javascript:void(0)"
      class="nav-btn "
      onclick="Reveal.toggleOverview();">
      <i class="fa-solid fa-layer-group"></i>
  </a>
  
  <a class="nav-btn" onclick="Reveal.up()">
      MAP
      <i class="fa-solid fa-arrow-up"></i>
  </a>
  
  
  <a class="nav-btn" onclick="Reveal.down()">
      REDUCE
      <i class="fa-solid fa-arrow-down"></i>
  </a>
  
  
  
  <a class="nav-btn" onclick="Reveal.right()">
      ORDENAR
      <i class="fa-solid fa-arrow-right"></i>
  </a>
  
</div>

</div>
<div class="card" style="display: flex; flex-direction: column;">
<span>["🌵", "🌿", "🌷"]</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>.<span class="hljs-title function_">forEach</span>(<span class="hljs-keyword">mostrar</span>)</span></span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span><span class="hljs-keyword">mostrar</span> ➜ <span style="color: #ff8">index</span> + <span style="color: #ff8">item</span></span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span style="display: flex; align-tems: center; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d="m10 17l5-5l-5-5z" />
</svg>
<span><span class="hljs-string">"0 🌵"</span></span>
</span>
<span style="display: flex; align-tems: center; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d="m10 17l5-5l-5-5z" />
</svg>
<span><span class="hljs-string">"1 🌿"</span></span>
</span>
<span style="display: flex; align-tems: center; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d="m10 17l5-5l-5-5z" />
</svg>
<span><span class="hljs-string">"2 🌷"</span></span>
</span>
</div>

</div>

<h2><span class="warning">REDUCE</span>: Reducir todo a un valor acumulado</h2>

Este método recorre un array y lo reduce a un solo valor acumulando el resultado en cada iteración.

<h3><span class="warning">Ejemplo</span>:</h3>

<div>

```javascript [] run
const numeros = [10, 20, 30, 40];

const suma = numeros.reduce((acumulador, numero) => {
  return acumulador + numero;
}, 0);

console.log(suma);
```
<br>
<div style="display:flex; justify-content: flex-start; gap:0.3em; flex-wrap: wrap;">
  <a href="javascript:void(0)"
      class="nav-btn "
      onclick="Reveal.toggleOverview();">
      <i class="fa-solid fa-layer-group"></i>
  </a>
  
  <a class="nav-btn" onclick="Reveal.up()">
      FOREACH
      <i class="fa-solid fa-arrow-up"></i>
  </a>
  
  
  
  
  <a class="nav-btn" onclick="Reveal.right()">
      ORDENAR
      <i class="fa-solid fa-arrow-right"></i>
  </a>
  
</div>

</div>
<div class="card" style="display: flex; flex-direction: column">
<span>[10, 20, 30, 40]</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>acumulador + valorActual</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span style="text-align: left; padding-left: 1em;">
<span style="display: flex; align-tems: center; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d="m10 17l5-5l-5-5z" />
</svg>
  0 + 10 ➜ acc = 10
</span>
<span style="display: flex; align-tems: center; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d="m10 17l5-5l-5-5z" />
</svg>
  10 + 20 ➜ acc = 30
</span>
<span style="display: flex; align-tems: center; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d="m10 17l5-5l-5-5z" />
</svg>
  30 + 30 ➜ acc = 60
</span>
<span style="display: flex; align-tems: center; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d="m10 17l5-5l-5-5z" />
</svg>
  60 + 40 ➜ acc = 100
</span>
</span>
<span><svg xmlns="http://www.w3.org/2000/svg"
      width="1.3em"
      height="1.3em"
      viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none" />
  <path fill="#f67efc" d="M13 12h6v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2h6V4h2z"/>
</svg>
</span>
<span>100</span>
</div>
</div>

---

<h1 align="center"><i class="fa-solid fa-arrow-down-up-across-line" style="color:#4f46e5;"></i><br/>Ordenar</h1>

<h2><span class="warning">Sort</span>: Orden ascendente y descendente</h2>

Este método se utiliza para ordenar un array, ya sea en orden alfabético o numérico, modificando el array original según una función de comparación o el orden Unicode por defecto.

<h3><span class="warning">Ejemplo</span>:</h3>

```javascript
const numeros = [5, 120, 12, 1, 45];

numeros.sort((a, b) => b - a);

console.log(numeros);
```

</div>