Array

Array en JavaScript es un tipo de objeto global el cual utilizamos para guardar datos. Array consiste en una colleccion o lista que contiene cero o mas tipos de datos, estos array utilizan un indice como punto de inicio cero 0 y el cual ese indice tambien se utilizando para acceder al valor dentro de elemento del array.

Los array son utiles para guardar multiples valores en una simple variable, el cual pueden ser organizado por medio de codigo para que pueda ser más legible y mantenible los datos dentro del array. Un array puede contener cualquier tipo de dato incluyendo numeros, cadena de caracteres y/o objetos.

Ejemplo de como es util el uso de array:

// Assign the five oceans to five variables
const ocean1 = "Pacific";
const ocean2 = "Atlantic";
const ocean3 = "Indian";
const ocean4 = "Arctic";
const ocean5 = "Antarctic";

// Using arrays, assign the five oceans
let oceans = [
  "Pacific",
  "Atlantic",
  "Indian",
  "Arctic",
  "Antarctic",
];

Como podemos ver en el ejemplo, en vez de crear cinco 5 variables separada, podemos usar una sola variable el cual contiene los cinco 5 element, utilizando corchete [...] simple que crea el array.

Creacion de array

Existen dos maneras de crear array.

  • Array literal, utilizando corchete simple [...]
let oceans = [
  "Pacific",
  "Atlantic",
  "Indian",
  "Arctic",
  "Antarctic",
];

console.log(oceans); //-> ["Pacific", "Atlantic", "Indian", "Arctic", "Antarctic"]
  • Por medio de constructor, utilizando la palabra reservada new
let oceans = new Array(
  "Pacific",
  "Atlantic",
  "Indian",
  "Arctic",
  "Antarctic",
);

console.log(oceans); //-> ["Pacific", "Atlantic", "Indian", "Arctic", "Antarctic"]

Indice array

Los array no contienen pares de nombre/valor "key/value" como los objeto, en vez de nombre/valor "key/value", los array contienen indice con un valor entero el cual comienza en 0.

let seaCreatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish"
];

En la siguen tabla, veremos un ejemplo de la relacion del indice con el array

octopus squid shark seahorse starfish
0 1 2 3 4

Cuando creamos el array, el mismo array contiene propiedades y metodos el cual podemos utilizar para saber cual es el tamaño del array .length y el indice de cada elemento .indexOf().

let seaCreatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish"
];

console.log(seaCreatures.length); //-> 5
console.log(seaCreatures.indexOf("shark")); //-> 2

Cuando no existe el elemento dentro del array, la funcion de .indexOf() nos devuelve -1

let seaCreatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish"
];

console.log(seaCreatures.indexOf("cuttlefish")); //-> -1

Acceso a element de array

Para acceder a un elemento dentro del array, utilizamos la variable del array junto el indice del elemento en conchetes.

let seaCreatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish"
];

console.log(seaCreatures[2]); //-> shark

Tambien podemos acceder a array anidados, utilizando la variables y indice pariente del elemento que queremos acceder.

let seaCreatures = [
  [
    "octopus",
    "squid",
  ],
  [
    "shark",
    "seahorse",
    "starfish"
  ]
];

console.log(seaCreatures[1][0]); //-> shark

Añadir elemento a array

Nuestra variable contiene cinco 5 elementos, sus indices consiste de 0 a 4, si queremos añadir otro elemento podemos asignar el valor al proximo indice del array.

let seaCreatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish"
];

seaCreatures[5] = "whale";
console.log(seaCreatures); //-> ["octopus", "squid", "shark", "seahorse", "starfish", "whale"]

Si por error asignamos valor indice mas adelantado que nuestro ultimo indice disponible, el interpretador de JavaScript asignara undefined a los valores saltados.

.push

Para evitar problemas de añadir elementos a array en indice equivocado, podemos utilizar el metodo .push que nos provee el mismo array.

let seaCreatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish"
];

seaCreatures.push("whale");
console.log(seaCreatures); //-> ["octopus", "squid", "shark", "seahorse", "starfish", "whale"]

.unshift

A diferencia del metodo .push, este metodo de array añade un nuevo valor al array al indice inicial y mueve los demas elemento al proximo indice.

let seaCreatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish"
];

seaCreatures.unshift("whale");
console.log(seaCreatures); //-> ["whale", "octopus", "squid", "shark", "seahorse", "starfish"]

Remover elemento de array

.splice

Podemos utilizar el metodo .splice del array, este metodo utiliza el primer parametro para indicar que indice vas a utilizar como punto de partida a eliminar y el segundo parametro es cuanto elemento eliminara desde ese punto de inicio que indicaste en el primer parametro.

let seaCreatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish",
  "whale"
];

seaCreatures.splice(2, 1);
console.log(seaCreatures); //-> ["octopus", "squid", "seahorse", "starfish", "whale"]

.slice

Este metodo es similar a .splice el cual remueve elemento de array, la diferencia esta en que este metodo crea un nuevo array y evita modificar el array original. Segundo la manera de implementacion es diferente, el primer parametro es el indice de elemento que desea que sea parte de este nuevo array modificado y el segundo parametro el indice hasta cual indice desea que sea incluido dentro del nuevo array.

let seaCreatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish",
  "whale"
];

let newSeaCreatures = seaCreatures.slice(2, 5);
console.log(newSeaCreatures); //-> ["shark", "seahorse", "starfish"]

.pop

Metodo .pop de array elimina el ultimo elemento de un array.

let seaCreatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish",
  "whale"
];

seaCreatures.pop();
console.log(seaCreatures); //-> ["octopus", "squid", "shark", "seahorse", "starfish"]

.shift

Al contrario de .unshift este remueve elemento inicial del array.

let seaCreatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish",
  "whale"
];

seaCreatures.shift();
console.log(seaCreatures); //-> ["squid", "shark", "seahorse", "starfish", "whale"]

Modificar elementos en array

Para modificar un array simplemente podemos usar el operador de asignacion.

let seaCreatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish",
  "whale"
];

seaCreatures[0] = "manatee";
console.log(seaCreatures); //-> ["manatee", "squid", "shark", "seahorse", "starfish", "whale"]

Otra manera que podemos modificar un array es utilizando un tercer parametro en el metodo de array .splice, este tercer parametro es el nuevo valor.

let seaCreatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish",
  "whale"
];

seaCreatures.splice(2, 1, "manatee");
console.log(seaCreatures); //-> ["octopus", "squid", "manatee", "seahorse", "starfish", "whale"]

Iteraciones atraves de array

Podemos hacer iteraciones por los array utilizando bucles for.

let seaCreatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish",
  "whale"
];

for(let i = 0; i < seaCreatures.length; i++) {
    console.log(i, seaCreatures[i]);
}
//-> 0 "octopus"
//-> 1 "squid"
//-> 2 "shark"
//-> 3 "seahorse"
//-> 4 "starfish"
//-> 5 "whale"

Tambien podemos utilizar bucles for...of, este bucle es parte de las nuevas funcionalidades de JavaScript.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver",
  "crystal"
];

for(let game of pokemonGames) {
    console.log(game);
}
//-> "red"
//-> "blue"
//-> "yellow"
//-> "gold"
//-> "silver"
//-> "crystal"

Metodos mutadores

Como hemos visto, los array contienen metodos propios el cual podemos utilizar para transformar el propio array, estas transformaciones modifican el propio array, a esto se le conoce como metodos mutadores.

.isArray

Este metodos nos ayuda a verificar si una variable es un array, este devuelve un valor booleano indicando la validez.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver",
  "crystal"
];

console.log(Array.isArray(pokemonGames)); //-> true

.pop

Metodo remueve ultimo elemento al final de elementos en array.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver",
  "crystal"
];

pokemonGames.pop();
console.log(pokemonGames); //-> ["red", "blue", "yellow", "gold", "silver"]

.shift

Metodo remueve primer elemento al inicio de elementos en array.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver",
  "crystal"
];

pokemonGames.shift();
console.log(pokemonGames); //-> ["blue", "yellow", "gold", "silver", "crystal"]

.push

Metodo añade elemento al final de elementos en array.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver"
];

pokemonGames.push("crystal");
console.log(pokemonGames); //-> ["red", "blue", "yellow", "gold", "silver", "crystal"]

.unshift

Metodo añade elemento al inicio de elementos de array.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver"
];

pokemonGames.unshift("crystal");
console.log(pokemonGames); //-> ["crystal", "red", "blue", "yellow", "gold", "silver"]

.splice

Metodo puede añadir como remover elemento en cualquier posicion de array, como hecho puede hacerlo de manera simultanea. Metodo .splice acepta tres parametro, el primero es el indice donde comienza, segundo cuantos elementos a eliminar desde el punto indice definido en el primer parametro y el tercer parametro que es opcional es el valor el cual quieres incluir en sustitucion de los eliminados.

Añadir con .splice

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver"
];

pokemonGames.splice(1, 0, "ruby");
console.log(pokemonGames); //-> ["red", "ruby", "blue", "yellow", "gold", "silver"]

Remover con .splice

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver"
];

pokemonGames.splice(1, 2);
console.log(pokemonGames); //-> ["red", "gold", "silver"]

Añadir y remover con .splice

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver"
];

pokemonGames.splice(1, 2, "ruby");
console.log(pokemonGames); //-> ["red", "ruby", "gold", "silver"]

.reverse

Metodo puede cambiar el orden de elemento del array.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver"
];

pokemonGames.reverse();
console.log(pokemonGames); //-> ["silver", "gold", "yellow", "blue", "red"]

.fill

Metodo puede remplazar todos los elemento del array a un valor estatico.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver"
];

pokemonGames.fill("ruby");
console.log(pokemonGames); //-> ["ruby", "ruby", "ruby", "ruby", "ruby"]

Este metodo tambien como opcion puede aceptar dos mas parametros, el primero es indice de inicio el cual comienza el remplazo y segundo punto indice el cual termina el remplazo.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver"
];

pokemonGames.fill("ruby", 1, 3);
console.log(pokemonGames); //-> ["red", "ruby", "ruby", "gold", "silver"]

.sort

Metodo nos permite organizar los elemento base a la primera letra de cada elemento o numero enteros.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver"
];

pokemonGames.sort();
console.log(pokemonGames); //-> ["blue", "gold", "red", "silver", "yellow"]

Metodos accesor

Metodos accesor son esos tipos de metodo al contrario de los mutadores que crean o devuelven un nuevo array transformado y evita cambiar el array original, tambien conocido como inmutadores.

.concat

Metodo nos ayuda a unir dos array.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver"
];

let pokemonNewGames = [
  "sun",
  "moon"
];

let pokemon = pokemonGames.concat(pokemonNewGames);
console.log(pokemon); //-> ["red", "blue", "yellow", "gold", "silver", "sun", "moon"]

.join

Metodo convierte el array en una cadena de caracteres, cada elemento sera separado por comas.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver"
];

let pokemonGame = pokemonGames.join();
console.log(pokemonGame); //-> red,blue,yellow,gold,silver

Este metodo tambien puede recibir un parametro el cual es utilizado para sustituir la coma entre elementos.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver"
];

let pokemonGame = pokemonGames.join(', ');
console.log(pokemonGame); //-> red, blue, yellow, gold, silver

.slice

Metodo copia una porcion de un array a un nuevo array. Primer parametro es el indice el cual comienza y segundo parametro es donde termina la copia.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver"
];

let pokemonGame = pokemonGames.slice(1, 3);
console.log(pokemonGame); //-> ["blue", "yellow"]

.indexOf

Metodo nos devuelve el indice del elemento.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver"
];

console.log(pokemonGames.indexOf("yellow")); //-> 2

En este metodo cuando no encuentra el valor, este devuelve el valor de negativo uno -1.

.lastIndexOf

Metodo nos devuelve el indice del ultimo elemento de array el cual es utilizado varias veces.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver",
  "blue"
];

console.log(pokemonGames.lastIndexOf("blue")); //-> 5

Metodos de iteración

Una tercera clase de metodos en array es la iteracion, estos metodos nos permite aplicar operaciones como funciones a cada elemento del array. Estos metodos tambien devuelve como resultado un nuevo array con la transformacion del array por aplicar la operacion o funcion.

.forEach

Metodo llama y aplica una funcion a cada elemento del array.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver",
  "blue"
];

pokemonGames.forEach((game) => {
  console.log(game);
});
//-> red
//-> blue
//-> yellow
//-> gold
//-> silver
//-> blue

.map

Metodo crea un nuevo array luego de haber aplicado una funcion.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver",
  "blue"
];

let games = pokemonGames.map((game) => {
  return `${game} !`;
});

console.log(games); //-> ["red !", "blue !", "yellow !", "gold !", "silver !", "blue !"]

.filter

Metodo crea un nuevo array con elementos el cual cumpla las condiciones de la operacion o funcion aplicada.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver",
  "blue"
];

let games = pokemonGames.filter((game) => {
    return game[0] === "b";
});

console.log(games); //-> ["blue", "blue"]

.reduce fold

Metodo reduce un array a un valor simple.

let numbers = [42, 23, 16, 15, 5, 8];

let sum = numbers.reduce((a, b) => {
  return a + b;
});

console.log(sum); //-> 109

.find

Metodo devuelve el primer valor que cumpla las condiciones de la operacion o funcion aplicada.

let pokemonGames = [
  "red",
  "blue",
  "yellow",
  "gold",
  "silver",
  "blue"
];

const pokemonNewGames = newGame => {
  return ["blue", "moon", "sun"].includes(newGame);
}

let game = pokemonGames.find(pokemonNewGames)

console.log(game); //-> blue

.findIndex

Metodo devuleve el primer elemento del array el cual cumpla las condiciones de la operacion o funcion aplicada. Si no encuentra lo que deseamos, devolvera el negativo uno -1.

results matching ""

    No results matching ""