Arrays en JavaScript

Un Array es un objeto global en JavaScript utilizado para almacenar datos de tipo números, strings y objetos en una lista de valores con un nombre y un índice. Los arrays comienzan a partir del índice cero y pueden ser manipulados con varios métodos.

Para acceder a un item en el array añadimos su índice entre corchetes detrás de la variable.

let scifiBooks = ["Yo Robot", "Fundación e imperio", "1984"];
console.log(scifiBooks[2]);

Output
"1984"

Play with it in JS Bin!

Array.isArray() determina si el valor pasado es un Array.

Array.isArray([1, 2, 3]); // true

Métodos Mutadores Mutan el array original

pop () Elimina el último elemento de un array y lo devuelve.
shift() Elimina el primer elemento del array y lo retorna.
push() Añade uno o más elementos al final de un array.
unshift() Agrega uno o más elementos al inicio del array.
splice() El método splice() cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos. Acepta tres parámetros:

índice donde se comenzará a cambiar el array.
un entero indicando el número de elementos a eliminar.
los elementos que se añadirán al array empezando en el índice indicado en el primer parámetro.

reverse() El método reverse() invierte el orden de los elementos de un array.
fill() Cambia todos los elementos en un array por un valor estático. Acepta tres parámetros:

Valor con el que se va a rellenar el array.
Índice inicial.
Índice final.

sort() Ordena los elementos de un array de acuerdo a su valor Unicode.

Métodos de acceso No mutan el array original

concat()
join()
slice()
indexOf()
lastIndexOf()

Métodos de iteración

For

let bebidas = ["Vodka", "Mate", "Caipirinha"];
for (let i = 0; i < bebidas.length; i++) {
  console.log(bebidas[i]);
}

Output
"Vodka"
"Mate"
"Caipirinha"

Pros: Permite hacer cosas como utilizar break y continue.
Contras: Sintaxis poco legible.

Nota: For no es un método de los arrays, es una sentencia para bucles en JavaScript pero se utiliza para recorrer arrays.

Play with it in JS Bin!

Foreach

Array forEach() es un método de Array.prototype introducido en ECMAScript 5.

ForEach Es la versión moderna del bucle for, con una sintaxis más sencilla.

El método forEach() ejecuta la función indicada una vez por cada elemento del array.

El método foreach() no modifica el array original.

El método foreach() llama a una función callback que acepta tres parámetros:

Valor actual del elemento
Indice del elemento (opcional)
El Array (opcional)

const listaCompra = ["Platanos", "Chocolate", "Limones"];

function miCompra(producto, index, array) {
  console.log(`En el ${index}: ${producto}`);
}

listaCompra.forEach(miCompra);

Output
"En el 0: Platanos"
"En el 1: Chocolate"
"En el 2: Limones"

Play with it in JS Bin!

Puedes simplificar el código de los loops foEach utlizando funciones flecha.

let colors = ["red", "green", "blue"];

colors.forEach((color) => console.log(color));

Output
'red'
'green'
'blue'

Play with it in JS Bin!

Map

Array map() es un método de Array.prototype introducido en ECMAScript 5.

El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.

El método map() no modifica el array original.

El método map() llama a una función callback que recibe tres parámetros:

Valor actual del elemento
Indice del elemento (opcional)
El Array (opcional)

let scifiMovies = [
  {
    name: "Tron",
    director: "Steven Lisberger",
    year: 1982,
  },
  {
    name: "Blade Runner 2049",
    director: "Denis Villeneuve",
    year: 2017,
  },
  {
    name: "Ex Machina",
    director: "Alex Garland",
    year: 2015,
  },
];

let directores = scifiMovies.map((x) => {
  return x.director;
});

console.log(directores);

Output
["Steven Lisberger", "Denis Villeneuve", "Alex Garland"]

Play with it in JS Bin!

Diferencia entre foreach() y map()

foreach() itera sobre una array en el que puedes aplicar operaciones en cada uno de sus ítems pero no devuelve nada, si guardas el resultado de la ejecución en una variable devuelve undefined.

map() recorre un array y devuelve una copia del array modificado.

Filter

El método filter() de Array.prototype crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.

callback es invocado con tres argumentos:

el valor del elemento
el indice del elemento
el objeto array completo

let randomPlaylist = [
  { name: "Led Zepelin", genre: "Rock" },
  { name: "Daft Punk", genre: "Techno" },
  { name: "Wu Tang", genre: "Hip Hop" },
  { name: "Tupack", genre: "Hip Hop" },
];

let hiphopMusic = randomPlaylist.filter((band) => band.genre === "Hip Hop");
let hiphopBand = hiphopMusic.map((artist) => artist.name);

console.log(hiphopMusic);
console.log(hiphopBand);

Output
[[object Object] {
  genre: "Hip Hop",
  name: "Wu Tang"
}, [object Object] {
  genre: "Hip Hop",
  name: "Tupack"
}]
["Wu Tang", "Tupack"]

En el ejemplo he combinado los métodos map() y filter() para obtener solo el nombre de la banda, no el objeto completo.

Play with it in JS Bin!

Reduce

Array Reduce es un método de Array.prototype introducido en ECMAScript 5 (ES5) y es soportado por todos los navegadores modernos.

El método reduce() ejecuta una función reductora sobre cada elemento de un array, devolviendo como resultado un único valor.

La función reductora recibe cuatro argumentos:

Acumulador (acc)
Valor Actual (cur)
Índice Actual (idx) // Opcional
Array (arr) // Opcional

let letters = ["H", "e", "l", "l", "o"];

let word = letters.reduce((acc, cur) => {
  return acc + cur;
});

console.log(word);

Output
"Hello"

Play with it in JS Bin!

Find

Find en un array de cadenas

const objetosPerdidos = ["Airpod derecho", "Chancla izquierda", "Gafas de sol"];

const buscar = objetosPerdidos.find(buscarObjeto);

function buscarObjeto(objeto) {
  return objeto === "Chancla izquierda";
}

console.log(buscar);

Output
"Chancla izquierda"

Play with it in JS Bin!

Find en un array de objetos

const vehiculosOcasion = [
  {
    marca: "Volkswagen",
    modelo: "Polo",
    km: 80.0,
    year: 2000,
  },
  {
    marca: "Seat",
    modelo: "Ibiza",
    km: 280.0,
    year: 2005,
  },

  {
    marca: "Toyota",
    modelo: "Yaris",
    km: 30.0,
    year: 2010,
  },
];

const propiedad1 = vehiculosOcasion.find(pocosKm).marca;
const propiedad2 = vehiculosOcasion.find(pocosKm).modelo;

function pocosKm(vehiculo) {
  return vehiculo.km < 50.0;
}

console.log(`Tenemos un: ${propiedad1} ${propiedad2}`);

Output
"Tenemos un: Toyota Yaris"

Play with it in JS Bin!

Spread operator

Spread operator es añadido en ECMAScript 6

...

Spread coge un array y lo divide en una lista de argumentos.

let frutas = ["Manzana", "Naranja", "Platano"];

let nuevoArrayFrutas = [...frutas];

console.log(nuevoArrayFrutas);

Output
["Manzana", "Naranja", "Platano"]

Spread te permite concatenar arrays,(también funciona con objetos.)

let frutas = ["Manzana", "Naranja", "Platano"];
let frutas2 = ["Piña", "Limon", "Mandarina"];

let macedonia = [...frutas, ...frutas2];

console.log(macedonia);

Output
[
  "Manzana",
  "Naranja",
  "Platano",
  "Piña",
  "Limon",
  "Mandarina"
]

Play with it in JS Bin!

Posteado en Programación con : JavaScript

« Tipos de datos en javascript La pila de ejecución en JavaScript »