JavaScript – Arrays

Que encontrarás aquí?

Aquí encontraras mis apuntes sobre los arrays en JavaScript, y además, links hacia documentación oficial.

• Que es un Array?
• Crear un Array
  • Crear un nuevo arreglo usando el spread operator
  • Acceder a un elemento mediante su índice
  • Lenght y las propiedades numéricas
• Recorrer un Array
  • ForEach
  • Map
• Destructuring Array
• Metodos Array

Que es un Array?

Un Array también nombrado como arreglo, es un conjunto de valores que pueden ser de distintos tipo de variables, este puede contener tanto una cadena de caracteres como string y en la siguiente valor un numero, o una booleana.

Los Arrays son útiles porque nos brindan efectuar operaciones de recorrido y mutación.

Crear un nuevo arreglo usando el spread operator

Podemos concatenar distintos objetos y almacenarlos dentro de un array:

const carrito = [];

const producto = {

    nombre: "monitor nuevo",
    precio: 400,
}

const producto2 = {

    nombre: "Telefono",
    precio: 200,
}


const producto3 = {

    nombre: "Ordenador",
    precio: 1400,
}


let resultado;

resultado = [...carrito, producto];
resultado = [...resultado, producto2];
resultado = [producto3, ...resultado];


console.table(resultado)

console.table(carrito)

Acceder a un elemento mediante su índice

Los índices de los arrays de JavaScript comienzan en cero, es decir, el índice del primer elemento de un array es 0, y el del último elemento es igual al valor de la propiedad length del array restándole 1.

Si se utiliza un número de índice no válido, se obtendrá undefined.

Lenght y las propiedades numéricas

La propiedad length de un objeto que es una instancia de tipo Array establece o devuelve la cantidad de elementos en esa matriz. Esta está conectada con algunas otras de sus propiedades numéricas.

Varios de los métodos propios de un array (p. ej., join(), slice(), indexOf(), etc.) tienen en cuenta el valor de la propiedad length de un array cuando se les llama.

Otros métodos (p. ej., push(), splice(), etc.) modifican la propiedad length de un array.

const clothing = ['shoes', 'shirts', 'socks', 'sweaters'];

console.log(clothing.length);

 

Recorrer un Array

Existen varias formas de recorrer un Array. Por ejemplo podemos utilizar un los bucles for, while, o do while para recorrer por el valor del índice del array junto al valor length para movernos de un valor a otro.

Ejemplo con los 3 tipos de bucles anteriormente mencionados:

//FOR

let numeros =[1,2,3,4,5,6,7,8,9,10,11,12,123,5434,234,21,123,214,56,333134,1423];

for (let i = 0; i< numeros.length; i++){
     console.log(`La posición ${i} tiene un valor de: ${numeros[i]}`);
    }


// WHILE
// Entrara en bucle siempre que se confirme la condición.

let a = 3;
while (a < 10) {
    console.log(`La posición ${a} tiene un valor de: ${numeros[a]}`);
    a++;
    }


// DO WHILE
// Almenos se ejecutara una vez y después se repetirá en bucle si la condición es cierta.

let x = 0;
do {
    console.log(`La posición ${x} tiene un valor de: ${numeros[x]}`);
    x++;
    } while (x < numeros.length);
 

ForEach

Este método nos permite iterar en cada elemento indexado al arreglo.

let ciudades = ["Madrid","Barcelona","Leon","Tarragona"];
ciudades.forEach(( city, index) =>{
console.log(`${city} - ${index}`);
})

Map

Devuelve un nuevo array que contiene el resultado de llamar a la función pasada como parámetro a todos los elementos del array sobre el que se invoca. Este método nos permite recorrer un arreglo de objetos.

const comidas = [
    {id: 1, momento: 'Desayuno'},
    {id: 2, momento: 'Almuerzo'},
    {id: 3, momento: 'Comida'},
    {id: 4, momento: 'Merienda'},
    {id: 5, momento: 'Cena'},
];
 
const momentoComida = comidas.map(function(comida) {
    return comida.momento;
});
 
console.log(momentoComida);

Destructuring Arrays

La sintaxis de asignación de desestructuración es una expresión de JavaScript que hace posible descomprimir valores de matrices o propiedades de objetos en distintas variables.

const carrito = [];

const producto = {
    nombre: "monitor nuevo",
    precio: 400,
}

const producto2 = {
    nombre: "Telefono",
    precio: 200,
}


const producto3 = {
    nombre: "Ordenador",
    precio: 1400,
}


let resultado;


// Agregamos una copia de carrito junto producto
resultado = [...carrito, producto];

// Agregamos una copia de resultado junto al producto2
resultado = [...resultado, producto2];

// Agregamos al inicio los valores del producto3 junto a una copia de resultado
resultado = [producto3, ...resultado];


console.table(resultado);

Metodos Array

Existen distintos métodos en JavaScript que nos facilitan la manipulación de los arrays.

Unshift – Añadir un elemento al principio

Podemos añadir un nuevo elemento al inicio de un array con el método unshift.

let panaderia = ["Baguet","Croisant","Magdalenas"];

panaderia.unshift("Tarta");
console.log(panaderia);

Push – Añadir un elemento al final

Podemos añadir un nuevo elemento al final de un array con el método push.

let panaderia = ["Baguet","Croisant","Magdalenas"];

panaderia.unshift("Tarta");
console.log(panaderia);

Pop – Eliminar el ultimo elemento

Podemos eliminar el ultimo elemento de un arreglo con el método pop.

let panaderia = ["Baguet","Croisant","Magdalenas"];

panaderia.pop();
console.log(panaderia);

Shift – Eliminar primer elemento

Podemos eliminar el primer elemento de un arreglo con el método shift.

let panaderia = ["Baguete","Croissant","Magdalenas"];

panaderia.shift();
console.log(panaderia);

IndexOf – Encontrar el valor índice de un elemento

El método indexOf nos permite encontrar el valor de índice, de cualquier dato almacenado.

let panaderia = ["Tarta","Baguete","Croissant","Magdalenas"];

console.log(panaderia.indexOf("Croisant"));
//2

Splice – Eliminar un elemento mediante su posición

El método indexOf nos permite encontrar el valor de índice, de cualquier dato almacenado.

let frutas = ["Manzana", "Banana"];
frutas.push('Naranja');

frutas.splice(1, 1);
console.log(frutas);

Eliminar varios elementos mediante su posición

Con .splice() no solo se puede eliminar elementos del array, si no que también podemos extraerlos guardándolo en un nuevo array. ¡Ojo! que al hacer esto estaríamos modificando el array de origen.

Slice – Copiar un Array

El método slice nos permite copiar un array en uno nuevo.

let frutas = ["Manzana", "Banana"];
let cesta = frutas.slice();
console.log(frutas);
console.log(cesta);

From – para crear una nueva instancia a partir de un objeto iterable

crea una nueva instancia de Array a partir de un objeto iterable.

let frutas = ["Manzana", "Banana"];
let cesta = frutas.slice();
console.log(frutas);
console.log(cesta);

IsArray – para comprobar con una respuesta booleana si el objeto es o no un Array

El método isArray determina si el valor pasado es un Array.

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

Of – para crear una nueva instancia con un numero de variable de parámetros.

El método of crea una nueva instancia Array con un número variable de elementos pasados como argumento, independientemente del número o del tipo.

La diferencia entre of y el constructor Array reside en como maneja los parámetros de tipo entero: Array.of(7) crea un array con un solo elemento, 7, mientras que Array(7) crea un array vacío con una propiedad length de 7 (Nota: esto implica un array de 7 ranuras vacías, no ranuras con valores undefined).

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Verificar un valor dentro de un array con un valor booleano.

// Arreglo de indices
const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio'];


/*
// Una forma alternativa de comprovar si un valor existe en un arreglo:
*/

meses.forEach((mes) => {
    if (mes === 'Sol'){
        console.log(mes);
    }else{
        console.log('No existe ese mes en el array');
    }
    
})

//Utilizando el metodo includes
// Includes retornara un bool
const resultado = meses.includes('Enero');
console.log(resultado);

some() – Para un arreglo de objetos

Si queremos verificar que un array de objetos contiene un valor, podemos utilizar el metodo includes, este nos devolvera un valor booleano como respuesta.

findIndex – Devolver el numero index de un valor.

reduce – sumar el valor de todos los indices en un valor.

find – Devolver el primer elemento que cumpla una condicion

Puede interesarte:

HTML
HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web.

CSS
CSS es el lenguaje de estilos utilizado para describir la presentación de documentos HTML.

Javascript
JavaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu sitio web.

Quieres saber mas?