Bruno R

Arrays

portfolio-next-l5vb64p5k-bandikyu.vercel.app

Que es un array

▸ Basicamente son objetos que tienen multiples valores almacenados, (popularmente se dice que son objetos en forma de lista).

▸ Se pueden almacenar en variables y tratarse de la misma manera que cualquier otro tipo de valor, con la diferencia de que podemos ingresar a cada valor individualmente y hacer cosas con cada uno de ellos. (esto se logra por medio de una recorrida del array utilizando un bucle y la modificando por medio de la orden en el bucle de cada uno de ellos "a la vez").

▸ Son utiles entonces para almacenar muchos valores que queremos manipular, sin necesidad de crear una variable para cada uno de estos valores. (lo que seria una locura xD)

Creando Arrays

Constan de corchetes cuadrados [] y cada elemento dentro de los corchetes separados por comas ,

let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];

Los arrays pueden estar compuestos por distintos tipos de datos, incluso otros arrays, Ej ⇒

let sequence = [1, 1, 2, 3, 5, 8, 13]; //array de numeros
let random = ['tree', 795, [0, 1, 2]]; //este contiene varios tipos de datos incluso otro array entre corchetes.

Acceder y modificar elementos del array

▸ Para

▸ tambien se puede

▸ Un array dentro de otro array se denomina array multidimensional, se puede acceder a su informacion colocando la ubicacion del array como si buscaramos cualquier elemento, y luego se colocaria una segunda notacion de corchetes para ingresar al valor que queramos del array interior. Ej ⇒

Encontrar la longitud de un array

Se puede saber cuantos elementos tiene un array de la misma manera que podia saber la cantidad de caracteres que tiene un string, utilizando la propiedad length.

shopping.length;
//output 5

Esta propiedad tiene muchos usos (no se cuales son), uno de los mas comunes es para definir el numero de repeticiones de un bucle (osea que el bucle se detenga cuando alla recorrido el mismo numero que elementos de array tenga) ⇒

let sequence = [1, 1, 2, 3, 5, 8, 13]; //declaracion del array
for (let i = 0; i < sequence.length; i++) { /*la primer sentencia del bucle
es la inicializacion de la variable que se usara, la segunda sentencia
es la condicion para que se repita el bucle, en este caso que el numero de la variable
no sea mayor que el numero de elementos que tiene el array (muy bonita la logica)*/
  console.log(sequence[i]);
}

Conversion entre string y arrays

Puede suceder que tengamos una cadena larga sin procesar, y necesitemos primer separar esta cadena en distintos elementos para ordenarla y manipularla mejor (convertirla en algo util basicamente), para esto tenemos el metodo split(). Explicado a lo gaucho, este metodo toma un unico parametro y genera un array con los cortes generados al encontrar este parametro en el string ⇒

let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
let myArray = myData.split(',');
myArray; //output ["Manchester", "London", "Liverpool", "Birmingham", "Leeds", "Carlisle"]

Tambien se puede aplicar el metodo a la inversa, osea pasar de array a string por medio del metodo join() ⇒

let myNewString = myArray.join(',');
myNewString; //output "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle"

Agregar o elminar elementos del array

Para agregar o eliminar elementos al final de un array se usan los metodos push() y pop() respectivamente ⇒

let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
myArray.push('Cardiff'); //output 7 (tipo de dato number)
myArray; //output (7) ["Manchester", "London", "Liverpool", "Birmingham", "Leeds", "Carlisle", "Cardiff"]
myArray.push('Bradford', 'Brighton'); //9
myArray; // output (9) ["...

Algo parecido pasa con el metodo para eliminar elementos de un array, pop(), pero con la diferencia de que el retorno al hacer la elminacion es el nombre del elemento que se elimino como dato string. ⇒

myArray.pop(); //elimina el ultimo elemento y como resultado figura como string este elemento eliminado
let removedItem = myArray.pop(); //se puede crear una variable con el elemento eliminado
myArray; //el array sin el elemento eliminado
removedItem;//output el nombre del elemento eliminado como dato string "x"

unshift()y shift(), funcionan igual que push() y pop() respectivamente pero en lugar de colocar los elementos al final los colocan al principio del array.

Ejercicio ⇒ imprecion de esos productos!

const list = document.querySelector('.output ul');
const totalBox = document.querySelector('.output p');
let total = 0;
list.innerHTML = '';
totalBox.textContent = '';
let products = [
               	'Underpants:6.99',
                'Socks:5.99',
                'T-shirt:14.99',
                'Trousers:31.99',
                'Shoes:23.99'];
	
for (let i = 0; i < products.length; i++) { //basicamente para cada uno de los elementos del array vamos a hacer lo que esta en este bloque
  let subArray = products[i].split(":"); //cada uno de los strings del array principal forman un array de dos elementos (cortados en ":")
  let prodPrice = Number(subArray[1]); //tome el segundo valor del subarray que son strings numericos y los pase al dato numerico (para manipularlos)
  let prodName = subArray[0]; //aca tome el primer dato del subarray (los nombres de los productos) y tambien lo guarde en otra variable
  total += prodPrice; //aca tome la variable total de arriba para sumarle el prodPrice cada vez que itere
  //entonces la primera iteracion total es 0 y se le suma un valor, en la segunda iteracion total ya tiene un valor y se le suma el nuevo valor y asi sucesivamente.  
  let itemText = `${prodName} - $ ${prodPrice }` ;

  const listItem = document.createElement('li');
  listItem.textContent = itemText;
  list.appendChild(listItem);
}

totalBox.textContent = 'Total: $' + total.toFixed(2);

Las 5 busquedas principales

const list = document.querySelector('.output ul');
const searchInput = document.querySelector('.output input');
const searchBtn = document.querySelector('.output button');

list.innerHTML = '';

let myHistory = [];

searchBtn.onclick = function() {
  if (searchInput.value !== '') {
    // number 1
    myHistory.push(searchInput.value);
/*esto de .value es un metodo de objeto que no conocia, esta diciendo el valor en
el elemento seleccionado con el selector, y la condicion del bucle dice
que si el valor de este elemento es distinto de vacio ejecutar las instrucciones*/
    list.innerHTML = '';

    for (let i = 0; i < myHistory.length; i++) {
      itemText = myHistory[i];
      const listItem = document.createElement('li');
      listItem.textContent = itemText;
      list.appendChild(listItem);
    }

    if (myHistory.length >= 5) {
			//number 2
      myHistory.shift();
    }
    searchInput.value = '';
    searchInput.focus();
  }
}

Ejercicio ⇒ Arrays 3

let myArray = [ "Ryu", "Ken", "Chun-Li", "Cammy", "Guile", "Sakura", "Sagat", "Juri" ];

myArray.pop(); //1 pedia que borre el ultimo elemento
myArray.push("Juan","Nico"); //2 pedia que agregue elementos
/*3 y aca esta lo bonito: queria q les agregue a cada elemento su numero de indice*/
for(i=0 ; i<myArray.length ; i++) { 
    myArray[i] = `${myArray[i]} (${i}) `
};
let myString = myArray.join("- ") //4 agregar - entre cada elemento cuando los convierta en un string

// Don't edit the code below here! (cosas para que funcione el codigo ponele en la pagina MDN)

section.innerHTML = ' ';

let para1 = document.createElement('p');
para1.textContent = myString;

section.appendChild(para1);