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
push()
unshift()
pop()
shift()
splice()
sort()
find()
map()
filter()
concat()
Object.assign({}, <Object>)
slice()
Last updated