Bueno, aquí vamos con los arreglos, pieza fundamental de la programación.
Sintaxis
const nomArr = [dato1, dato2, dato3];const nomArr = [dato1, dato2, dato3];Otra forma que no es muy usada pero buena conocerla const nomArr = new Array [ dato1, dato2, dato3 ]);
Se puede colocar lo que sea dentro de los datos
const nomArr=["Hola", 20, true, null, {n:"Brig", p:"ingeniero"}, [1,2,3]];Console.table();
Es una buena opción usar console.table(nomArr); para visualizar los datos de un array.
const numeros = [ 10, 20, 30, 40, 50 ];
console.table(numeros);El resultado en consola se ve así:
Arreglo dentro de un arreglo
const numeros = [10, 20, 30, 40, 50, [1,2,3]];
console.table(numeros);El resultado en consola se ve así:
Acceder a un dato del arreglo
nomArr[index];
console.log(numeros[1]); // Arroja: 20Acceder a un arreglo dentro de un arreglo
Es bastante intuitivo:
nomArr[index][subindex];
console.log(numeros[5][2]); // Arroja: 3El método .lenght
Este método va a contar la cantidad de datos en un arreglo empezando por 1 (no desde cero). Es muy útil para usarlo cuando se usa un loop y recorrer el arreglo.
const meses = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio'];
console.log(numeros.lenght); // Arrojará: 7
For Loop
Es como en casi todos los lenguajes de programación que he estudiado, Php, Java y VisualBasic. Su sintaxis es la siguiente:
for(i=0; i<meses.lenght; i++) {
console.log(meses[i]);
}El loop siempre me dio algo de confusión porque trataba de crear un mapa mental sobre el camino que recorre la lógica y para mi era intuitivo pensar que el bucle recorría los tres parámetros siempre en cada camino y me hizo perder tiempo tratar de buscarle esa lógica lineal en vez de entender la necesidad de las características de un bucle para un programador.
El primer parámetro, i=0, es lo primero que lee y lo lee esa única vez, no más. Lo llamo el start.
Dicho lo anterior, en el primer recorrido de un for loop se lee el start y la condición. De allí pasa a la ejecución del código si se cumple la condición.
En el resto de recorridos ya no se lee el primer parámetro, se leerán la condición y el incremento, así hasta el final del loop.
El resultado de lo anterior:
Añadir elementos a un arreglo
Forma tradicional
meses[6] = "Julio";Lo anterior va a agregar el string «Julio» en la posición 6 del arreglo.
meses[0] = "January";Lo anterior va a sobre escribir el dato en el index 0.
meses[10] = "Septiembre";Lo anterior va a crear un dato en el index 10 sin crear los index 7, 8 ni 9, así es JavaScript.
Añadir elementos al inicio o al final de un arreglo
Forma Imperativa
Dado el siguiente arreglo:
const meses = [ 'Abril', 'Mayo', 'Junio' ];
console.table(meses);
Método .unshift(); para añadir elementos al inicio
meses.unshift( 'Enero', 'Febrero', 'Marzo' );
console.table(meses);
Método .push(); para añadir elementos al final
meses.unshift( 'Julio', 'Agosto' 'Septiembre' );
console.table(meses);
En el curso esta parte se hizo con objetos dentro de un arreglo simulando un carrito de compra.
Forma Declarativa
Spread Operator
Esta forma en el curso se hizo usando objetos dentro de un arreglo.
La idea de la clase es observar cómo se crea un nuevo arreglo a partir de arreglos existentes o combinación de arreglos, con principalmente objetos, y objetos. Es decir:
let carrito = [];
const producto1 = {
nombre: "Don Quijote",
tipo: "Libro",
precio: "80",
}
const producto2 = {
nombre: "Pixel 4",
tipo: "Celular",
precio: "600",
}
const producto3 = {
nombre: "Collar",
tipo: "Accesorio",
precio: "120",
}
carrito = [producto2]; //Primer paso
console.log(carrito);
carrito = [...carrito, producto3]; //Segundo paso
console.log(carrito);
carrito = [producto1, ...carrito]; //Tercer paso
console.log(carrito);En el primer paso agrego el objeto producto2 al arreglo carrito. En el segundo paso podría indicar que el arreglo carrito va a ser igual a un arreglo con los objetos producto2 y producto3, pero aplico el Spread Operator. En el tercer paso, donde se hace más evidente el uso del Spread Operator, se agrega al arreglo el objeto producto1 y luego el contenido (especificado con los tres puntos) del arreglo carrito. De esa manera se agrega producto1, luego producto2 y luego producto3. Si no hubiese colocado los tres puntos entonce se termina agregando producto1 y luego un arreglo. Con lo que terminaría siendo un arreglo de un objeto y un arreglo.
El resultado de los tres console.log(); son los siguientes:
Un ejemplo hecho por mi
Dados los cuatro arreglos:
let meses = [];
const meses1 = ['Enero', 'Febrero', 'Marzo', 'Abril'];
const meses2 = ['Mayo', 'Junio', 'Julio', 'Agosto'];
const meses3 = ['Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
//A partir de los arreglos anteriores construyo el nuevo arreglo
meses = [...meses1, ...meses2, ...meses3];
console.log(meses);El resultado en console es el siguiente:
Si el arreglo meses se hubiese armado de la siguiente manera:
meses = [meses1, ...meses2, meses3];El resultado será un arreglo que contiene el arreglo meses1, el contenido del arreglo meses2 y el arreglo meses3.
Pero cuando se trabaja con una variable tipo array que se le va a agregar elementos por el método Spread Operator, esa variable debe estar declarada con let y no con const. No puede ser una constante, no me resulta cuando lo hago. Creo que esa fue una de las razones por la confusión del carajo en el curso.
Eliminar elementos de un arreglo
Método .pop(); para eliminar el último elemento
nombreArray.pop();Con lo anterior se elimina el último elemento del arreglo nombreArray.
Método .shift(); para eliminar el primer elemento
nombreArray.shift();Con lo anterior se elimina el primer elemento del arreglo nombreArray.
Método .splice(); para eliminar cualquier elemento
Dado el siguiente arreglo:
nombreArray.splice(3, 1);Toma dos parámetros, el primero es el index desde donde se va a empezar a eliminar, el segundo parámetro es cuanto elementos a partir de allí se van a eliminar, si solo es uno, entonces se coloca un uno. En el ejemplo de arriba se eliminará el elemento en la posición index 3 y solo ese.
Estas son las formas imperativas, al igual que lo anterior también hay una forma declarativa que se verá más adelante, según el curso.
Destructuring de arrays
Recordar que el destructuring es para crear variables a partir de los elementos, en este caso, de un arreglo.
const [nomVarPriDatoArray, nomVarSegDatoArray… ] = nomArray;
const numero[10, 20, 30, 40, 50];
const [primero] = numeros; //Crea la variable primero con el dato: 10
const [,,tercero] = numeros; //Crea la variable tercero con el dato: 30
const [primero, segundo, ...tercero] = numeros;
console.log(primero); //Arroja 10
console.log(segundo); //Arroja 20
console.log(tercero); //Arroja un arreglo con los elementos 30, 40, 50No menciona cómo hago para seleccionar un elemento del array que esté muy lejos del primero, es decir, de un array de 500 elementos, cómo selecciono el elemento 499; ¿tengo que colocara 498 comas?
El método .forEach() en el arreglo
El método forEach es importante y debería dedicarle una página, pero lo voy a explicar aquí. Empiezo por decir que no he visto en el curso que se aplique un forEach a un objeto.
El método .forEach llama una función que va a tener como parámetro cada elemento del arreglo y realiza una operación con cada uno de ellos.
const carrito = [
{ nombre: 'Monitor 20 Pulgadas', precio: 500},
{ nombre: 'Televisión 50 Pulgadas', precio: 700},
{ nombre: 'Tablet', precio: 300},
{ nombre: 'Audifonos', precio: 200},
{ nombre: 'Teclado', precio: 50},
{ nombre: 'Celular', precio: 500},
]
//Recorrer un arreglo de la forma tradicional y mostrar su contenido...
for(let i = 0; i < carrito.length; i++ ){
console.log( `Articulo: ${ carrito[i].nombre } Precio: $ ${carrito[i].precio} ` )
}
console.log('');
console.log("Ahora con forEach");
console.log('');
//ForEach
carrito.forEach( function(producto) {
console.log( `El articulo es: ${ producto.nombre } y su precio: ${producto.precio} ` )
})El resultado en la consola es:
El método .map()
Esto hace lo mismo que .forEach() pero con la particularidad de que con .map() se creo un arreglo nuevo a partir de otro arreglo. Se podría decir que .map() mapea otro arreglo.
const carrito = [
{ nombre: 'Monitor 20 Pulgadas', precio: 500},
{ nombre: 'Televisión 50 Pulgadas', precio: 700},
{ nombre: 'Tablet ', precio: 300},
{ nombre: 'Audifonos', precio: 200},
{ nombre: 'Teclado', precio: 50},
{ nombre: 'Celular', precio: 500},
]
const nuevoArray = carrito.map( function(producto) {
return `${ producto.nombre }`;
})
console.log(nuevoArray);Con lo anterior tomamos el arreglo carrito, cuyos elementos son objetos, y a partir de él creamos un nuevo arreglo llamado nuevoArreglo que estará compuesto por el valor de las llaves nombre de cada objeto. El resultado se ve así:
Por lo que he visto hasta ahora parece ser indispensable el return en la función para que esa línea de código se incorpore en el nuevo array que genera .map.
Hasta aquí la parte de arreglos.