martes, 19 de mayo de 2020

Arreglos con JavaScript

Arrays en JavaScript

Los arrays son colecciones de datos, multiples datos almacenados en una sola variable, para definir un arreglo se debe colocar sus elementos dentro de corchetes y separados por comas.
Se puede crear arreglos de dos formas:
Creando

//Primera forma:
let listA = ["Argos","Pelusa","Shirley"];
//Segunda forma:
let listB = new Array("Argos","Pelusa","Shirley");


Recorriendo un Array

// Tenemos el siguiente arreglo de Strings que contiene 3 elementos:
let mascotas = ["Argos","Pelusa","Shirley"];

// Podemos capturar un valor (El primer valor siempre es [0]):
alert(mascotas[ 1 ]); //mostrará Pelusa en un alert

//Recorrer el arreglo e imprimirlo en consola
for ( let i of mascotas ) {
   console.log(i);
}

Modificando un valor

Para modificar un valor simplemente se usa el operador de asignación indicando entre corchetes la ubicación del elemento

// Tenemos el siguiente arreglo de Strings que contiene 3 elementos:
let mascotas = ["Argos","Pelusa","Shirley"];

// Cambiando un valor:
mascota[ 2 ] = "Gardfield" //Cambiará "Shirley" por Gardfield


Métodos de Array

Encontramos los siguientes:

  • join()
  • toString()
  • pop()
  • push()
  • shift()
  • unshift()
  • length()

let list = new Array("Argos", "Pelusa", "Shirley");

// -- toString()
// Devolverá un String donde los elementos se separan por comas:
let textual = list.toString(); 
console.log(textual); // "Argos,Pelusa,Shirley"

// -- join() --
// Devolverá un String donde los elementos se separan por el parámetro indicado:
let separadores = list.join("#"); 
console.log(separadores); // "Argos#Pelusa#Shirley"

// -- pop() --
list.pop(); //Elimina el último elemento
console.log(list.toString()); //Argos,Pelusa

// -- push() --
list.push("Nerón"); // Agrega un elemento al final
console.log(list.toString()); //Argos,Pelusa,Nerón

// -- shift() --
list.shift(); //Elimina el primer elemento
console.log(list.toString()); //Pelusa,Nerón

// -- unshift() --
list.unshift("Rambito"); // Agrega un elemento al inicio
console.log(list.toString()); //Rambito,Pelusa,Nerón

// -- length --
let longitud = list.length; // Devuelve el tamaño del arreglo
list[list.length] = "Blacky" // Agrega un elemento al final (alternativa a push)
console.log(list.toString()); //Rambito,Pelusa,Nerón,Blacky

// -- splice()
// El primer valor indica la cantidad de nuevos elementos
// El segundo valor la cantidad de elementos eliminados
// Los demás valores son los que se agregarán
list.splice(2, 0, "Lalo", "Koda");
console.log(list.toString()); //Rambito,Pelusa,Lalo,Koda,Nerón,Blacky

// -- sort()
// Ordena el Array (trata a todos los elementos como String)
list.sort();
console.log(list.toString()); //Blacky,Koda,Lalo,Nerón,Pelusa,Rambito

// Se puede almacenar los elementos eliminados asignando a una variable
let eliminados = list.splice(2, 3, "Fede", "Fido");
console.log(eliminados.toString()); // Lalo,Nerón,Pelusa
console.log(list.toString());       // Blacky,Koda,Fede,Fido,Rambito

// ** CONCATENAMIENTO **
// -- concat()
let arr1 = ["Paul", "Isacc"];
let arr2 = ["Fernanda", "Luz", "Abel"];
let arr3 = ["Ramón", "Vicky"];

//Crea un Array que combina los 3 anteriores.
let personas = arr1.concat(arr2, arr3);
console.log(personas.toString()); //Paul,Isacc,Fernanda,Luz,Abel,Ramón,Vicky


Métodos REDUCE, FILTER y MAP

Simplifican el trabajo con los arreglos al no tener que recorrerlos explicitamente, creando menos variables y usando la sintaxis de funciones arrow

REDUCE permite reducir todos los elementos del arreglo a un solo elemento. Como una concatenación de elementos o suma de valores

let nombres = ["Dana", "Dina", "Dona"];
let numeros = [10, 20, 30, 40, 50];

/* ======== REDUCE ========*/
let suma = numeros.reduce((a,v)=>a+v);
console.log(suma); //150

let texto = nombres.reduce((a,v)=>a + " - " + v );
console.log(texto); //Dana - Dina - Dona

FILTER permite reducir crear un arreglo con los elementos que cumplan con la condición indicada.

let valores = [10, 13, 21, 7, 85];
let apellidos  = ["Quispe", "Salinas", "Rosas", "Garcia", "Baltodano"];

/* ======== FILTER ========*/
//Filtramos solo los múltiplos de 5
let multiplos = valores.filter(n => n % 5 === 0);
console.log(multiplos.toString()); // 10,85

//Filtramos solo los apellidos con 6 letras o menos
let apellidosCortos = apellidos.filter(e => e.length <= 6);
console.log(apellidosCortos.toString()); // Quispe,Rosas,Garcia

MAP permite crear un arreglo a partir de los elementos del arreglo inicial.

let sueldos = [950, 1000, 1500, 1200, 3000];

/* ======== MAP ========*/
//Obtener el descuento por AFP del 9% de todos los sueldos
let afp = sueldos.map(n => n * 0.09);
console.log(afp.toString()); // 85.5,90,135,108,270


NOTA Es posible combinar los métodos previos. Por ejemplo:

let datos = [10, 13, 21, 7, 85, 14, 2];

//Obtener la suma de los valores pares
let sumaPar = datos.filter(n => n % 2 === 0).reduce((a, v) => a + v);
console.log(sumaPar); // 26

//Crear un arreglo solo con los valores impares
let impares = datos.filter(n => n % 2 === 1).map(n => n);
console.log(impares.toString()); //13,21,7,85