Arrays En Js

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

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

---

<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.

<h1><span class="text-glow">PUSH</span>: Agregar al final</h1>

El método `.push()` agrega un nuevo elemento al final del arreglo y modifica el original.

### Ejemplo

```javascript run
const heroesDC = ["batgirl", "green arrow"];

console.log(heroesDC);

heroesDC.push("catwoman", "shazam");

console.log(heroesDC);
```
</div>

<div class="explain" style="display: flex; flex-direction: column; align-items: center; justify-content: space-between">
<div>En el ejemplo agregamos nuevos héroes al final del arreglo usando con <span class="text-glow">.push()</span>.</div>
<a data-preview-image="/assets/media/javascript/arrays/push-explicado.webp"><i class="fa-solid fa-circle-info fa-xl" title="Explicación"></i></a>
<div style="display: flex; justify-content: space-evenly">
<a href="javascript:void(0)" class="nav-btn" onclick="Reveal.toggleOverview(); return false;"><i class="fa-solid fa-layer-group"></i></a>
<a onclick="Reveal.down()" class="nav-btn">UNSHIFT <i class="fa-solid fa-arrow-down"></i></a>
<a class="nav-btn" onclick="Reveal.right()"><span id="nextTitle">ELIMINAR</span> <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>

</div>

<h1><span class="text-glow">UNSHIFT</span>: Agregar al inicio</h1>

El método `.unshift()` agrega uno o más elementos al inicio del arreglo y modifica el original.

### Ejemplo

```javascript run
const equipo = ["Messi", "Suárez"];

console.log(equipo);

equipo.unshift("Neymar", "Iniesta");

console.log(equipo);
```

</div>

<div class="explain" style="display: flex; flex-direction: column; justify-content: space-between; align-items: center">
<div>En el ejemplo agregamos nuevos jugadores al inicio del equipo usando <span class="text-glow">.unshift()</span>.</div>
<a data-preview-image="/assets/media/javascript/arrays/unshift-explicado.webp"><i class="fa-solid fa-circle-info fa-xl" title="Explicación"></i></a>
<div style="display: flex; justify-content: space-evenly">
<a href="javascript:void(0)" class="nav-btn" onclick="Reveal.toggleOverview(); return false;"><i class="fa-solid fa-layer-group"></i></a>
<a onclick="Reveal.up()" class="nav-btn">PUSH <i class="fa-solid fa-arrow-up"></i></a>
<a class="nav-btn" onclick="Reveal.right()"><span id="nextTitle">ELIMINAR</span> <i class="fa-solid fa-arrow-right"></i></a>
</div>
</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.

<h1><span class="text-glow">POP</span>: Eliminar el último</h1>

El método `.pop()` elimina el último elemento del arreglo y modifica el original.

### Ejemplo

```javascript run
const equipo = ["Messi", "Suárez", "Neymar"];

console.log(equipo);

equipo.pop();

console.log(equipo);
```

</div>
<div class="explain" style="display: flex; flex-direction: column; justify-content: space-between; align-items: center">
<div>En el siguiente ejemplo eliminaremos el último jugador del equipo usando <span class="text-glow">.pop()</span>.</div>
<a data-preview-image="/assets/media/javascript/arrays/shift-explicado.webp"><i class="fa-solid fa-circle-info fa-xl" title="Explicación"></i></a>
<div style="display: flex; justify-content: space-evenly">
<a href="javascript:void(0)" class="nav-btn" onclick="Reveal.toggleOverview(); return false;"><i class="fa-solid fa-layer-group"></i></a>
<a onclick="Reveal.down()" class="nav-btn">SHIFT <i class="fa-solid fa-arrow-down"></i></a>
<a class="nav-btn" onclick="Reveal.right()"><span id="nextTitle">FILTRAR Y BUSCAR</span> <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
</div>

<h1><span class="text-glow">SHIFT</span>: Eliminar el primero</h1>

El método `.shift()` elimina el primer elemento del arreglo y desplaza los demás elementos hacia atrás.

### Ejemplo

```js run
const tareas = ["Despertar", "Desayunar", "Estudiar", "Dormir"];

console.log(Object.entries(tareas));

tareas.shift();

console.log(Object.entries(tareas));
```

</div>

<div class="explain" style="display: flex; flex-direction: column; justify-content: space-between; align-items: center">
<div>En el siguiente ejemplo eliminaremos la primera tarea del arreglo y veremos cómo cambian sus índices.</div>
<a data-preview-image="/assets/media/javascript/arrays/shift-explicado.webp"><i class="fa-solid fa-circle-info fa-xl" title="Explicación"></i></a>
<div style="display: flex; justify-content: space-evenly">
<a href="javascript:void(0)" class="nav-btn" onclick="Reveal.toggleOverview(); return false;"><i class="fa-solid fa-layer-group"></i></a>
<a onclick="Reveal.up()" class="nav-btn">POP <i class="fa-solid fa-arrow-up"></i></a>
<a class="nav-btn" onclick="Reveal.right()"><span id="nextTitle">FILTRAR Y BUSCAR</span> <i class="fa-solid fa-arrow-right"></i></a>
</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.

<h1><span class="text-glow">INCLUDES</span>: Verificar existencia</h1>

El método `.includes()` verifica si un valor existe dentro de un arreglo 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.

### Ejemplo

```js run
const frutas = ["manzana", "plátano", "naranja"];

const existePlatano = frutas.includes("plátano");
const existeUva = frutas.includes("uva");

console.log(existePlatano);
console.log(existeUva);
```

</div>
<div class="explain" style="display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 1em">
<div>En el siguiente ejemplo comprobamos si una fruta está dentro del arreglo usando <span class="text-glow">.includes()</span>.</div>
<a data-preview-image="/assets/media/javascript/arrays/shift-explicado.webp"><i class="fa-solid fa-circle-info fa-xl" title="Explicación"></i></a>
<div style="display: flex; justify-content: space-evenly">
<a href="javascript:void(0)" class="nav-btn" onclick="Reveal.toggleOverview(); return false;"><i class="fa-solid fa-layer-group"></i></a>
<a onclick="Reveal.down()" class="nav-btn">INDEXOF <i class="fa-solid fa-arrow-down"></i></a>
<a class="nav-btn" onclick="Reveal.right()"><span id="nextTitle">FILTRAR Y BUSCAR</span> <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
</div>

<h1><span class="text-glow">INDEXOF</span>: Conocer la posición</h1>

El método `.indexOf()` devuelve la posición ( índice ) de la primera aparición de un elemento dentro de un arreglo o cadena de texto, o `-1` si no lo encuentra.

### Ejemplo

```javascript run
const equipos = ["Colo Colo", "U de Chile", "Universidad Católica", "O'Higgins"];

console.log(equipos.indexOf("Universidad Católica"));
console.log(equipos.indexOf("Palestino"));
```

</div>
<div class="eplain" style="display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 1em">
<div>En el siguiente ejemplo buscamos la posición de dos equipos dentro del arreglo usando <span class="text-glow">.indexOf()</span> y vemos el índice que devuelve en consola.</div>
<a data-preview-image="/assets/media/javascript/arrays/shift-explicado.webp"><i class="fa-solid fa-circle-info fa-xl" title="Explicación"></i></a>
<div style="display: flex; justify-content: space-evenly">
<a href="javascript:void(0)" class="nav-btn" onclick="Reveal.toggleOverview(); return false;"><i class="fa-solid fa-layer-group"></i></a>
<a onclick="Reveal.up()" class="nav-btn">INCLUDES <i class="fa-solid fa-arrow-up"></i></a>
<a onclick="Reveal.down()" class="nav-btn">FIND <i class="fa-solid fa-arrow-down"></i></a>
<a class="nav-btn" onclick="Reveal.right()"><span id="nextTitle">TRANSFORMAR</span> <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
</div>

<h1><span class="text-glow">FIND</span>: Buscar el primer match</h1>

El método `.find()` devuelve el primer elemento de un arreglo que cumpla con una condición, o `undefined` si no encuentra ninguno.

### Ejemplo

```javascript run
const edades = [12, 18, 25, 17, 30];

const mayorEdad = edades.find(edad => edad >= 18);

console.log(mayorEdad);
```

</div>
<div class="explain" style="display: flex; flex-direction: column; justify-content: space-betweem; gap: 1em; align-items: center">
<div>En el siguiente ejemplo buscamos el primer número que sea mayor o igual a 18 dentro del arreglo usando <span class="text-glow">.find()</span> y mostramos el resultado en consola.</div>
<a data-preview-image="/assets/media/javascript/arrays/shift-explicado.webp"><i class="fa-solid fa-circle-info fa-xl" title="Explicación"></i></a>
<div style="display: flex; justify-content: space-evenly">
<a href="javascript:void(0)" class="nav-btn" onclick="Reveal.toggleOverview(); return false;"><i class="fa-solid fa-layer-group"></i></a>
<a onclick="Reveal.up()" class="nav-btn">INDEXOF <i class="fa-solid fa-arrow-up"></i></a>
<a onclick="Reveal.down()" class="nav-btn">FILTER <i class="fa-solid fa-arrow-down"></i></a>
<a class="nav-btn" onclick="Reveal.right()"><span id="nextTitle">TRANSFORMAR</span> <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
</div>

<h1><span class="text-glow">FILTER</span>: Buscar todos los match</h1>

El método `.filter()` crea un nuevo arreglo con los elementos que cumplen una condición

### Ejemplo

```js run
const numbers = [10, 20, 55.33, 23];

function numberIsEven(num) {
  return Math.round(num) % 2 === 0;
}

const pares = numbers.filter(numberIsEven);

console.log(pares);
```

</div>
<div class="explain" style="display: flex; flex-direction: column; justify-content: space-between; align-items: center">
<div>En el siguiente ejemplo usamos <span class="text-glow">.filter()</span> para obtener un nuevo arreglo con solo los números pares, redondeando cada valor antes de evaluarlo.</div>
<a data-preview-image="/assets/media/javascript/arrays/filter-explicado.webp"><i class="fa-solid fa-circle-info fa-xl" title="Explicación"></i></a>
<div style="display: flex; justify-content: space-evenly">
<a href="javascript:void(0)" class="nav-btn" onclick="Reveal.toggleOverview(); return false;"><i class="fa-solid fa-layer-group"></i></a>
<a onclick="Reveal.up()" class="nav-btn">FIND <i class="fa-solid fa-arrow-up"></i></a>
<a class="nav-btn" onclick="Reveal.right()"><span id="nextTitle">TRANSFORMAR</span> <i class="fa-solid fa-arrow-right"></i></a>
</div>
</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.

<h1><span class="text-glow">MAP</span>: Crear un nuevo array</h1>

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

### Ejemplo

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

// Crear un nuevo arreglo agregando un texto a cada nombre
const mensajesJedi = nombresJedi.map((nombreJedi) => {
    return `${nombreJedi} usa la Fuerza`;
});

// Mostrar el nuevo arreglo en la consola
console.log(mensajesJedi);
```
</div>
<div class="explain" style="display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 1em">
<div>En el ejemplo usamos un array de nombres y creamos uno nuevo usando <span class="text-glow">.map()</span>.</div>
<a data-preview-image="/assets/media/javascript/arrays/filter-explicado.webp"><i class="fa-solid fa-circle-info fa-xl" title="Explicación"></i></a>
<div style="display: flex; justify-content: space-evenly">
<a href="javascript:void(0)" class="nav-btn" onclick="Reveal.toggleOverview(); return false;"><i class="fa-solid fa-layer-group"></i></a>
<a onclick="Reveal.down()" class="nav-btn">FOREACH <i class="fa-solid fa-arrow-down"></i></a>
<a class="nav-btn" onclick="Reveal.right()"><span id="nextTitle">ORDENAR</span> <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>

</div>

<h1><span class="text-glow">FOREACH</span>: Recorrer un array</h1>

El método `.forEach()` recorre cada elemento de un arreglo y ejecuta una función para cada uno, sin crear un nuevo arreglo.

### Ejemplo

```javascript run
const heroes = ["Iron Man", "Thor", "Hulk"];

// Recorrer cada elemento del arreglo
heroes.forEach(hero => {
  console.log(hero);
});
```

</div>
<div class="explain" style="display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 1em">
<div>En el ejemplo recorremos el array de héroes usando <span class="text-glow">.forEach()</span> y mostramos cada elemento en consola.</div>
<a data-preview-image="/assets/media/javascript/arrays/filter-explicado.webp"><i class="fa-solid fa-circle-info fa-xl" title="Explicación"></i></a>
<div style="display: flex; justify-content: space-evenly">
<a href="javascript:void(0)" class="nav-btn" onclick="Reveal.toggleOverview(); return false;"><i class="fa-solid fa-layer-group"></i></a>
<a onclick="Reveal.up()" class="nav-btn">MAP <i class="fa-solid fa-arrow-up"></i></a>
<a onclick="Reveal.down()" class="nav-btn">REDUCE <i class="fa-solid fa-arrow-down"></i></a>
<a class="nav-btn" onclick="Reveal.right()"><span id="nextTitle">ORDENAR</span> <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>

</div>

<h1><span class="text-glow">REDUCE</span>: Reducir todo a un valor acumulado</h1>

El método `.reduce()` recorre un array y lo reduce a un solo valor acumulando resultados en cada iteración.

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

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

console.log(suma);
```

</div>
<div class="explain" style="display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 1em">
<div>En el siguiente ejemplo sumamos todos los números de un arreglo usando `.reduce()` y mostramos el resultado en consola.</div>
<a data-preview-image="/assets/media/javascript/arrays/reduce-explicado.webp"><i class="fa-solid fa-circle-info fa-xl" title="Explicación"></i></a>
<div style="display: flex; justify-content: space-evenly">
<a href="javascript:void(0)" class="nav-btn" onclick="Reveal.toggleOverview(); return false;"><i class="fa-solid fa-layer-group"></i></a>
<a onclick="Reveal.up()" class="nav-btn">FOREACH <i class="fa-solid fa-arrow-up"></i></a>
<a class="nav-btn" onclick="Reveal.right()"><span id="nextTitle">ORDENAR</span> <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
</div>

---

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

---

# Sort

El método `.sort()` se utiliza para ordenar los elementos de un arreglo, ya sea en orden alfabético o numérico, modificando el arreglo original según una función de comparación o el orden Unicode por defecto.

## Ordenar de mayor a menor

En el siguiente ejemplo ordenamos un arreglo de números de mayor a menor usando `.sort()` y mostramos el resultado en consola.

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

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

console.log(numeros);
```