Arrays

Funciones más comunes

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.

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.

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.

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.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

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.

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

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.

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:

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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:

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:

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.

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

const cities = ["Tokyo", "Cairo", "Los Angeles", "México", "Paris", "Seattle"];
console.log(cities.slice(2));
console.log(cities.slice(2,4));
//> Array ["Los Angeles", "México", "Paris", "Seattle"]
//> Array ["Los Angeles", "México"]

Mutabilidad

Mutable	Inmutable
push() unshift() pop() shift() splice() sort() find()	map() filter() concat() Object.assign({}, <Object>) slice()