# Arrays

## forEach

El método **`forEach()`** ejecuta la función indicada una vez por cada elemento del array.

```
const array1 = ['a', 'b', 'c'];

array1.forEach((element, i) => console.log(element, i));

// "a"
// "b"
// "c"
```

## for...of

La sentencia **sentencia** `for...of` ejecuta un bloque de código para cada elemento de un objeto iterable, como lo son: `String`, `Array`, objetos similares a array (por ejemplo, `arguments` or `NodeList`), `TypedArray`, `Map`, `Set` e iterables definidos por el usuario.

```javascript
const arr = ["A", "B", "C", "D", "E"];
for (const item of arr) {
  console.log(item);
}
```

## for...in

La instrucción `for-in` itera sobre todas las `propiedades enumerables` de un objeto.

```javascript
const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// Expected output:
// "a: 1"
// "b: 2"
// "c: 3"

// Otra manera de hacerlo
for (const key in object) {
  if (user.hasOwnProperty(key)) {
    console.log(`${property}: ${object[property]}`);
  }
}
```

No se recomienda usar para arrays aunque se podria ya que puede producir resultados inesperados.

## find

El método `find()` devuelve el valor del primer elemento del array que cumple la función de prueba proporcionada.

```javascript
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// Expected output: 12
```

es **MUTABLE**

## filter

El método `filter()` crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada o devuelve un array vacío.

<pre class="language-javascript"><code class="lang-javascript">const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
<strong>const result = words.filter(word => word.length > 6);
</strong>console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]
</code></pre>

Por lo tanto es inmutable y el nuevo array creado solamente puede contener:

* Cero coincidencias
* Todas coincidencias
* Algunas coincidencias
* Pero nunca mas del array original

es **INMUTABLE** (Crea un nuevo array)

## findIndex

El método `findIndex()` devuelve el **índice** del **primer elemento** de un array que cumpla con la función de prueba proporcionada. En caso contrario devuelve -1.

```javascript
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element === 130;
console.log(array1.findIndex(isLargeNumber));
// Expected output: 3
```

### indexOf

Método para cadenas y *arrays* de valores primitivos en JavaScript

```typescript
const a = [5, 12, 8, 130, 44];
a.indexOf(8);
// 2
```

## map

El método `map()` crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos. Siempre regresa el número de elementos del array.

```javascript
const numbers = [1, 5, 10, 15];
const doubles = numbers.map(function(x) {
   return x * 2;
});
```

Pero cuando los elementos del *array* son objetos, el `map()` devuelve la referencia y se puede **MUTAR** el objeto, para evitar esto, se utiliza el `spread operator,` por ejemplo:

```javascript
const orders = [
  {
    customerName: "Nicolas",
    total: 60,
    delivered: true,
  },
  {
    customerName: "Zulema",
    total: 120,
    delivered: false,
  },
];

const ordersRealNew = orders.map((i) => {
  return { ...i, tax: .30 };
});

```

## concat

Es un método que se utiliza para concatenar dos o más arrays. Este método devuelve un nuevo array que contiene los elementos de los arrays originales.

```javascript
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = array1.concat(array2);

console.log(array3); // salida: [1, 2, 3, 4, 5, 6]
```

**es INMUTABLE**

## every

Retorna `true` si **todos** los números evaluados cumplen con la condición.

```javascript
const array = [0, 1, 2, 3, 4, 5];
const even = (element) => element >= 0;
```

**Advertencia:** ¡Llamar este método en un array vacío devuelve `true` para cualquier condición!

## some

El método **`some()`** comprueba si al menos un elemento del array cumple con la condición implementada por la función proporcionada.

```javascript
const array = [1, 2, 3, 4, 5];
// Checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array.some(even));
// Expected output: true
```

## reduce

El método **`reduce()`** ejecuta una función **reductora** sobre cada elemento de un array, devolviendo como resultado un único valor.

```javascript
const totals = [1, 2, 3, 4, 3, 3, 4, 10, 3];
// Saber cuantas veces se repite un numero en el array y devolverlo en un objeto
const rta = totals.reduce((acc, item) => {
  if (!acc[item]) acc[item] = 1;
  else acc[item] += 1;
  return acc;
}, {});
console.log(rta);
// output: { '1': 1, '2': 1, '3': 4, '4': 2, '10': 1 }
```

## join

El método **`join()`** une todos los elementos de una matriz en una cadena y devuelve esta cadena.

```javascript
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
// Expected output: "Fire,Air,Water"
console.log(elements.join(''));
// Expected output: "FireAirWater"
console.log(elements.join('-'));
// Expected output: "Fire-Air-Water"
```

Pensado para Arrays de datos primitivos

## includes

El método **`includes()`** determina si una matriz incluye un determinado elemento, devuelve `true` o `false` según corresponda.

```javascript
const array1 = [1, 2, 3];
console.log(array1.includes(2));
// Expected output: true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// Expected output: true
console.log(pets.includes('at'));
// Expected output: false
```

El método `includes()` puede ser utilizado en un array de objetos, pero debes tener en cuenta que se compara con una referencia al objeto y no con el contenido del objeto en sí.&#x20;

```javascript
const personas = [
  { nombre: "Juan", edad: 30 },
  { nombre: "María", edad: 25 },
  { nombre: "Pedro", edad: 40 }
];
const personaBuscada = { nombre: "Juan", edad: 30 };
const existe = personas.includes(personaBuscada);
console.log(existe); // salida: false
```

Si quisieras encontrar el objeto específico en el array, tendrías que buscarlo utilizando un método diferente, como `find()` o `filter()`

## flat

El método `flat()` en JavaScript se utiliza para "aplanar" arrays, es decir, para convertir un array que contiene arrays anidados en un array unidimensional. El método crea un nuevo array que contiene todos los elementos de los sub-arrays en un único array. **El valor de profundidad predeterminado es 1**.

```javascript
const numeros = [1, 2, [3, 4, [5, 6]]];
const numerosAplanados = numeros.flat();
console.log(numerosAplanados); // salida: [1, 2, 3, 4, [5, 6]]

const numerosAplanados2 = numeros.flat(2);
console.log(numerosAplanados); // salida: [1, 2, 3, 4, 5, 6]
```

## flatMap

El método `flatMap()` en JavaScript combina dos operaciones: `map()` y `flat()`. Permite aplicar una función a cada elemento de un array y aplanar el resultado en un único array.

```javascript
const calendars = {
  primaryCalendar: [
    {
      startDate: new Date(2021, 1, 1, 15),
      endDate: new Date(2021, 1, 1, 15, 30),
      title: "Cita 1",
    },
    {
      startDate: new Date(2021, 1, 1, 17),
      endDate: new Date(2021, 1, 1, 18),
      title: "Cita 2",
    },
  ],
  secondaryCalendar: [
    {
      startDate: new Date(2021, 1, 1, 12),
      endDate: new Date(2021, 1, 1, 12, 30),
      title: "Cita 2",
    },
    {
      startDate: new Date(2021, 1, 1, 9),
      endDate: new Date(2021, 1, 1, 10),
      title: "Cita 4",
    },
  ],
};

const calendarArr = Object.values(calendars);
const calendarsFlat = calendarArr.flat();
console.log(calendarsFlat.flatMap((i) => i.startDate));
// output: [
//  2021-02-01T21:00:00.000Z,
//  2021-02-01T23:00:00.000Z,
//  2021-02-01T18:00:00.000Z,
//  2021-02-01T15:00:00.000Z
// ]
```

## splice

El método **`splice()`** cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos.

El método splice recibe tres argumentos

* El índice donde comenzará a cambiar el array.
* La cantidad de elementos que serán reemplazados.
* Uno o varios elementos que reemplazarán a los originales del array.

```javascript
const array = [1, 2, 3, 4];
const elements = array.splice(2, 1, "tres");
console.log(elements); // [ 1, 2, 'tres', 4 ]

const array2 = [1, 2, 3, 4];
const elements2 = array2.splice(1, 2, "dos", "tres");
console.log(elements2); // [ 2, 3 ] Elementos eliminados por la funcion splice
console.log(array2); // [ 1, 'dos', 'tres', 4 ]
```

También lo usamos para eliminar objetos

```javascript
const personas = [
  { nombre: "Juan", edad: 25 },
  { nombre: "María", edad: 30 },
  { nombre: "Pedro", edad: 35 }
];
const indice = personas.findIndex(persona => persona.nombre === "María");
if (indice !== -1) {
  personas.splice(indice, 1);
}
console.log(personas); // desaparece el objeto persona "Maria"
```

Para agregar un nuevo elemento a un array utilizando el método `splice()` en JavaScript, puedes hacer lo siguiente:

```javascript
javascriptCopy code// Crear un array
let arr = [1, 2, 3, 4, 5];

// Agregar un nuevo elemento al array en una posición específica (por ejemplo, al final)
arr.splice(arr.length, 0, 6);

console.log(arr); // Output: [1, 2, 3, 4, 5, 6]
```

En este ejemplo, `splice()` se utiliza para agregar el número `6` al final del array `arr`. La sintaxis de `splice()` es la siguiente:

```javascript
javascriptCopy codearr.splice(startIndex, deleteCount, newItem1, newItem2, ...);
```

* `startIndex`: El índice en el que se desea realizar la operación de inserción.
* `deleteCount`: El número de elementos a eliminar (en este caso, 0, ya que no queremos eliminar ningún elemento).
* `newItem1`, `newItem2`, ...: Los nuevos elementos que se van a agregar al array.

Al pasar `arr.length` como `startIndex`, estamos indicando que queremos agregar el nuevo elemento al final del array.

<br>

## slice

El método `slice()` devuelve una copia de una parte del array dentro de un nuevo array empezando por *inicio* hasta *fin* (*fin* no incluido). El array original no se modificará.

<pre class="language-javascript"><code class="lang-javascript">const cities = ["Tokyo", "Cairo", "Los Angeles", "México", "Paris", "Seattle"];
console.log(cities.slice(2));
console.log(cities.slice(2,4));
<strong>//> Array ["Los Angeles", "México", "Paris", "Seattle"]
</strong>//> Array ["Los Angeles", "México"]
</code></pre>

## Mutabilidad

<table><thead><tr><th>Mutable</th><th>Inmutable</th><th data-hidden></th></tr></thead><tbody><tr><td><pre class="language-javascript"><code class="lang-javascript">push()
unshift()
pop()
shift()
splice()
sort()
find()
</code></pre></td><td><pre class="language-javascript"><code class="lang-javascript">map()
filter()
concat()
Object.assign({}, &#x3C;Object>)
slice()
</code></pre></td><td></td></tr></tbody></table>

##


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shimozurdo.gitbook.io/frontend/html5/javascript/arrays.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.