09 - Arrays en JavaScript - Carlos E. Cimino
09 - Arrays en JavaScript - Carlos E. Cimino
13
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
const colores = ["Rojo", "Azul", "Lila", "Gris"]; const numeros = [14, 0, -5];
const personas = [
{ nombre: "Luis", edad: 27 }, const animales = [];
{ nombre: "Ana", edad: 22 }, animales[0] = "Búho";
{ nombre: "Pepe", edad: 33 }, animales[1] = "Gato";
{ nombre: "Maria", edad: 25 } animales[2] = "Perro";
];
https://www.w3schools.com/js/js_arrays.asp
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
El constructor de Array y el método estático 'of' producen el El constructor de Array y el método estático 'of' producen
mismo resultado cuando tienen más de un parámetro. distinto resultado cuando tienen un solo parámetro entero.
El método estático 'from' permite crear un array a partir de los valores de un iterable.
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/of https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/from
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
Operaciones básicas
const colores = ["Rojo", "Azul", "Lila"]; const colores = ["Rojo", "Azul", "Lila"];
console.log(colores); // ["Rojo", "Azul", "Lila"] console.log(colores.length); // 3
Mostrar un array directamente. Obtener la longitud.
const colores = ["Rojo", "Azul", "Lila"]; const colores = ["Rojo", "Azul", "Lila"];
const elAzul = colores[1]; colores[1] = "Gris";
console.log(elAzul); // "Azul" console.log(colores); // ["Rojo", "Gris", "Lila"]
Índices negativos: permitidos pero no son parte del array como tales. Array con “huecos".
https://stackoverflow.com/questions/13618571/should-negative-indexes-in-javascript-arrays-contribute-to-array-length https://blog.caplin.com/2012/01/13/javascript-is-hard-part-1-you-cant-trust-arrays/
https://www.w3schools.com/js/js_array_methods.asp
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
Agregar / Quitar
const colores = ["Rojo", "Azul"]; const colores = ["Rojo", "Azul"];
colores.push("Lila"); colores.unshift("Lila");
console.log(colores); // ["Rojo", "Azul", "Lila"] console.log(colores); // ["Lila", "Rojo", "Azul"]
const tam = colores.push("Oro"); const tam = colores.unshift("Gris");
console.log(colores); // ["Rojo", "Azul", "Lila", "Oro"] console.log(colores); // ["Oro", "Lila", "Rojo", "Azul"]
console.log(tam); // 4 console.log(tam); // 4
Agregar elemento al final (retorna nueva longitud). Agregar elemento al principio (retorna nueva longitud).
const colores = ["Rojo", "Azul", "Lila"]; const colores = ["Rojo", "Azul", "Lila"];
const ultimo = colores.pop(); // "Lila" const primero = colores.shift(); // "Rojo"
console.log(colores); // ["Rojo", "Azul"] console.log(colores); // ["Azul", "Lila"]
Eliminar elemento al final (retorna elemento eliminado). Eliminar elemento al principio (retorna elemento eliminado).
const colores = ["Rojo", "Azul"]; const colores = ["Rojo", "Azul", "Lila", "Gris"];
// arr.splice(inicio, cantBorrar, item1, item2, ...) // arr.splice(inicio, cantBorrar, item1, item2, ...)
const borrados = colores.splice(2, 0, "Lila", "Gris"); const borrados = colores.splice(1, 2);
console.log(colores); // ["Rojo", "Azul", "Lila", "Gris"] console.log(colores); // ["Rojo", "Gris"]
console.log(borrados); // [] console.log(borrados); // ["Azul", "Lila"]
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/push https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/shift
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/pop https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/splice https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/delete
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/concat https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
console.log(colores.join()); // "Rojo,Azul,Lila,Gris"
console.log(colores.join("")); // "RojoAzulLilaGris"
console.log(colores.join(" ")); // "Rojo Azul Lila Gris"
console.log(colores.join("-")); // "Rojo-Azul-Lila-Gris"
console.log(colores.join(" || ")); // "Rojo || Azul || Lila || Gris"
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/toString https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/join
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
Modificar arrays
Estos métodos modifican el array sobre el que se invocan. Devuelven el mismo array sobre el cual actuaron.
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/fill
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
Consultar en arrays
const colores = ["Rojo", "Azul", "Lila", "Gris"];
console.log(colores.includes("Azul")); // true
console.log(colores.includes("azul")); // false
console.log(colores.indexOf("Azul")); // 1
console.log(colores.indexOf("azul")); // -1
console.log(colores.lastIndexOf("Azul")); // 3
console.log(colores.lastIndexOf("azul")); // -1
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/includes https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
Mostrar elementos con for Mostrar elementos con foreach (función de orden superior)
const colores = ["Rojo", "Azul", "Lila", "Gris"]; const colores = ["Rojo", "Azul", "Lila", "Gris"];
Mostrar elementos con for…of Mostrar elementos con foreach y función flecha anónima.
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
find
findIndex
some
foreach
Itera el array aplicando una función a cada elemento, retornando undefined.
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
map
Itera el array aplicando una función a cada elemento, retornando un nuevo array con los resultados.
const colores = ["Rojo", "Azul", "Lila", "Gris"]; const numeros = [1, 5, 10, 15];
const coloresUpper = colores.map(elem => elem.toUpperCase()); const dobles = numeros.map(n => n * 2);
console.log(coloresUpper); // ["ROJO", "AZUL", "LILA", "GRIS"] console.log(dobles); // [2, 10, 20, 30]
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
filter
Itera el array aplicando un predicado a cada elemento, retornando un nuevo array con aquellos que hayan sido true.
const colores = ["Rojo", "Azul", "Negro", "Gris", "Verde"]; const numeros = [1, 4, 11, 16];
const coloresMasDe4 = colores.filter(elem => elem.length > 4); const pares = numeros.filter(n => n % 2 == 0);
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
reduce
Itera el array aplicando una función reductora a cada elemento, retornando un único valor como resultado.
const suma = numeros.reduce((acu, n) => acu + n); const resta = numeros.reduce((acu, n) => acu - n);
console.log(suma); // 10 console.log(resta); // -8
console.log(suma); // 20
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
reduceRight
Itera el array aplicando una función reductora a cada elemento comenzando desde la derecha,
retornando un único valor como resultado.
let valor = arr.reduceRight(function callback(acumulado, valorActual, indice, array) { // Reducción }, valorInicial)
(Opc.) (Opc.) (Opc.)
const suma = numeros.reduceRight((acu, n) => acu + n); const resta = numeros.reduceRight((acu, n) => acu - n);
console.log(suma); // 10 console.log(resta); // -2
console.log(suma); // 20
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
every
Itera el array aplicando un predicado a cada elemento, retornando true si todos los resultados dan true.
console.log(todosPositivos); // true
console.log(todosPares); //false
¡Llamar este método en un array vacío devuelve true para cualquier condición!
console.log(deberiaSerFalse); // true
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/every
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
some
Itera el array aplicando un predicado a cada elemento, retornando true si algún resultado da true.
console.log(algunNegativo); // false
console.log(algunPar); // true
¡Llamar este método en un array vacío devuelve false para cualquier condición!
console.log(deberiaSerTrue); // false
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/some
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
find
Itera el array en busca de un elemento, retornando el valor de la primera ocurrencia o undefined si no se encuentra.
const pepe = personas.find(p => p.nombre === "Pepe"); const juan = personas.find(p => p.nombre === "Juan");
console.log(pepe); // {nombre: "Pepe", edad: 33} console.log(juan); // undefined
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/find
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
findIndex
Itera el array en busca de un elemento, retornando el índice de la primera ocurrencia o -1 si no se encuentra.
const idx = personas.findIndex(p => p.nombre === "Pepe"); const idx = personas.findIndex(p => p.nombre === "Juan");
console.log(idx); // 2 console.log(idx); // -1
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
Aprendé más en mi canal de Youtube Arrays en JavaScript | Carlos E. Cimino
Personas ordenadas por nombre de forma ascendente. Personas ordenadas por edad de forma descendente.