Descripción de los arrays, sus métodos y funcionamiento

arrays.js

/* Array o Arreglo
Es una estructura de datos similares a una lista que nos proporciona métodos para efectuar operaciones de recorrido y mutación.
La longitud y los tipos de elementos de un arreglo son dinámicos. Los arreglos tienen índices que empiezan en 0 y no pueden ser negativos.
*/

// Declaración de un arreglo
let nombres = ['Juan', 'Pedro', 'Maria', 'Jose'];

// Acceder a un elemento del arreglo
// Si queremos acceder al primer elemento del arreglo, debemos hacerlo con el índice 0
console.log(nombres[0]); // Juan

// Acceder al último elemento del arreglo
// Si queremos acceder al último elemento del arreglo, debemos hacerlo con el índice (longitud - 1)
console.log(nombres[nombres.length - 1]); // Jose

// Recorrer un arreglo
// Para recorrer un arreglo, podemos usar un ciclo for, acá imprimirá todos los elementos del arreglo
for (let i = 0; i < nombres.length; i++) {
  console.log(nombres[i]);
}

// También se puede con un forEach, haciendo uso de una función de flecha (arrow function)
// El forEach recibe como parámetro una función de flecha, la cual recibe como parámetro cada elemento del arreglo
// y ejecuta el código que se encuentre dentro de la función de flecha
nombres.forEach((nombre) => {
  console.log(nombre);
});

// Agregar un elemento al final del arreglo
// Para agregar un elemento al final del arreglo, podemos usar el método push
// El método push retorna la longitud del arreglo, al retornarnos la longitud del arreglo podemos asignarlo a una variable
let longitudArreglo = nombres.push('Luis');
console.log(longitudArreglo); // 5
nombres.push('Luis');
console.log(nombres); // ['Juan', 'Pedro', 'Maria', 'Jose', 'Luis']

// Agregar un elemento al inicio del arreglo
// Para agregar un elemento al inicio del arreglo, podemos usar el método unshift
nombres.unshift('Raul');
console.log(nombres); // ['Raul', 'Juan', 'Pedro', 'Maria', 'Jose', 'Luis']

// Eliminar un elemento del final del arreglo
// Para eliminar un elemento del final del arreglo, podemos usar el método pop
// El método pop retorna el elemento eliminado, al retornarnos el elemento eliminado podemos asignarlo a una variable
let nombreEliminado = nombres.pop();
console.log(nombres.pop()); // Luis
console.log(nombres); // ['Raul', 'Juan', 'Pedro', 'Maria', 'Jose']

// Eliminar un elemento del inicio del arreglo
// Para eliminar un elemento del inicio del arreglo, podemos usar el método shift
nombres.shift();
console.log(nombres); // ['Juan', 'Pedro', 'Maria', 'Jose']

// Eliminar un elemento en una posición específica del arreglo
// Para eliminar un elemento en una posición específica del arreglo, podemos usar el método splice
// El método splice recibe como parámetro el índice del elemento a eliminar y la cantidad de elementos a eliminar
nombres.splice(1, 1);
console.log(nombres); // ['Juan', 'Maria', 'Jose']

// Encontrar el índice de un elemento en el arreglo
// Para encontrar el índice de un elemento en el arreglo, podemos usar el método indexOf
// El método indexOf recibe como parámetro el elemento a buscar y retorna el índice del elemento
console.log(nombres.indexOf('Maria')); // 1

// Encontrar el índice de un elemento en el arreglo a partir de una posición específica
// Para encontrar el índice de un elemento en el arreglo a partir de una posición específica, podemos usar el método indexOf
// El método indexOf recibe como parámetro el elemento a buscar y la posición a partir de la cual buscar
console.log(nombres.indexOf('Maria', 2)); // -1

// findIndex es similar a indexOf, pero recibe como parámetro una función de flecha
// La función de flecha recibe como parámetro cada elemento del arreglo y retorna true o false
// Si retorna true, retorna el índice del elemento, si retorna false, retorna -1
console.log(nombres.findIndex((nombre) => nombre === 'Maria')); // 1

/* find es similar a findIndex, pero retorna el elemento en vez del índice
find recibe como parámetro una función de flecha
La función de flecha recibe como parámetro cada elemento del arreglo y retorna true o false
Si retorna true, retorna el elemento, si retorna false, retorna undefined
*/
console.log(nombres.find((nombre, index) => index === 1)); // Maria

// Existen findLastIndex y findLast, que funcionan igual que findIndex y find, pero retornan el último elemento que cumpla la condición

// Obtener la longitud del arreglo
console.log(nombres.length); // 4

// También se puede reducir el length del arreglo
nombres.length = 2;
console.log(nombres); // ['Juan', 'Pedro']


// Convertir un arreglo a una cadena de texto
// Para convertir un arreglo a una cadena de texto, podemos usar el método join
// El método join recibe como parámetro el separador que se usará para unir los elementos del arreglo
console.log(nombres.join(' - ')); // Juan - Pedro

// También se puede usar el método toString, pero el separador por defecto es una coma
console.log(nombres.toString()); // Juan,Pedro

// Convertir una cadena de texto a un arreglo
// Para convertir una cadena de texto a un arreglo, podemos usar el método split
// El método split recibe como parámetro el separador que se usará para separar los elementos de la cadena de texto
let cadena = 'Juan,Pedro,Maria';
console.log(cadena.split(',')); // ['Juan', 'Pedro', 'Maria']

// También se puede usar el método from, pero el separador por defecto es una coma
console.log(Array.from(cadena)); // ['J', 'u', 'a', 'n', ',', 'P', 'e', 'd', 'r', 'o', ',', 'M', 'a', 'r', 'i', 'a']
console.log(Array.from('12345')); // ['1', '2', '3', '4', '5']

// También con el spread operator
console.log([...cadena]); // ['J', 'u', 'a', 'n', ',', 'P', 'e', 'd', 'r', 'o', ',', 'M', 'a', 'r', 'i', 'a']
console.log([...'12345']); // ['1', '2', '3', '4', '5']

// Y podemos definir el separador con el spread operator
console.log([...cadena].join(' - ')); // J - u - a - n - , - P - e - d - r - o - , - M - a - r - i - a
console.log([...12345].join(' - ')); // 1 - 2 - 3 - 4 - 5])

// También podemos definir el tipo de dato de los elementos del arreglo
console.log(Array.from(cadena, (caracter) => caracter.toUpperCase())); // ['J', 'U', 'A', 'N', ',', 'P', 'E', 'D', 'R', 'O', ',', 'M', 'A', 'R', 'I', 'A']
console.log(Array.from('12345', (numero) => parseInt(numero))); // [1, 2, 3, 4, 5]
console.log(Array.from('12345', Number)); // [1, 2, 3, 4, 5]

// Invertir un arreglo
// Para invertir un arreglo, podemos usar el método reverse
console.log(nombres.reverse()); // ['Maria', 'Pedro', 'Juan']

/* Ordenar un arreglo
Para ordenar un arreglo, podemos usar el método sort
El método sort recibe como parámetro una función de flecha
La función de flecha recibe como parámetro dos elementos del arreglo y retorna un número
Si retorna un número menor a 0, el primer elemento se ordena antes que el segundo
Si retorna un número mayor a 0, el segundo elemento se ordena antes que el primero
Si retorna 0, los elementos se mantienen en el mismo orden
*/
console.log(nombres.sort((a, b) => a.localeCompare(b))); // ['Maria', 'Pedro', 'Juan']

// También se puede usar el método sort sin parámetros
console.log(nombres.sort()); // ['Juan', 'Maria', 'Pedro']

// También se puede usar el método sort con números
let numeros = [1, 5, 3, 2, 4];
console.log(numeros.sort()); // [1, 2, 3, 4, 5]