Programación con JavaScript: Arrays

Un array es una estructura de datos que permite almacenar y organizar múltiples elementos relacionados bajo un solo nombre. Los elementos dentro de un array pueden ser de cualquier tipo de dato, como por ejemplo números, cadenas, objetos y funciones. Los arrays son una parte esencial de la programación, ya que permiten manejar y manipular colecciones de datos de manera eficiente.

Elementos e índices

Podemos imaginar un array como una caja con compartimentos numerados, donde cada compartimento puede contener un valor. Cada valor se llama «elemento» y se almacena en una posición específica identificada con un «índice». Los índices comienzan desde 0, lo que significa que el primer elemento tiene un índice de 0, el segundo tiene un índice de 1, y así sucesivamente.

Creación de arrays

Podemos crear un array utilizando la sintaxis de corchetes [], dentro de los cuales colocamos los elementos separados por comas:

let numeros = [1, 2, 3, 4, 5];
let colores = ["rojo", "verde", "azul"];
let mixto = [10, "texto", true, null, { nombre: "Juan" }];

Acceso a elementos

Podemos acceder a los elementos de un array utilizando su índice, que comienza desde 0. Por ejemplo, con el código que mostramos a continuación, en el array frutas, el elemento en el índice 0 es «manzana», el elemento en el índice 1 es «pera», y así sucesivamente:

let frutas = ["manzana", "pera", "naranja", "sandía"];

console.log(frutas[0]); // Salida: "manzana"
console.log(frutas[1]); // Salida: "pera"
console.log(frutas[2]); // Salida: "naranja"

Propiedad length

Cada array tiene una propiedad length que indica la cantidad de elementos que contiene:

let colores = ["rojo", "verde", "azul"];

console.log(colores.length); // Salida: 3

Modificación de elementos

Podemos modificar elementos de un array asignando nuevos valores a sus índices. Por ejemplo, a continuación mostramos el código necesario para cambiar el valor del segundo elemento en el array colores:

let colores = ["rojo", "verde", "azul"];

colores[1] = "amarillo";

console.log(colores); // Salida: ["rojo", "amarillo", "azul"]

Métodos de arrays

JavaScript proporciona una gran variedad de métodos incorporados para trabajar con arrays. Estos métodos nos permiten realizar operaciones como añadir, eliminar, filtrar, mapear y más, de manera muy eficiente y legible. A continuación enumeramos algunos de los métodos más importantes.

push() y pop()

• push(): Agrega elementos al final del arreglo.
• pop(): Elimina el último elemento del arreglo.

let colores = ["rojo", "verde"];

colores.push("azul");
console.log(colores); // Salida: ["rojo", "verde", "azul"]

colores.pop();
console.log(colores); // Salida: ["rojo", "verde"]

shift() y unshift()

• unshift(): Agrega elementos al inicio del arreglo.
• shift(): Elimina el primer elemento del arreglo.

let numeros = [2, 3, 4];

numeros.unshift(1);
console.log(numeros); // Salida: [1, 2, 3, 4]

numeros.shift();
console.log(numeros); // Salida: [2, 3, 4]

splice()

• Permite agregar, eliminar o reemplazar elementos en una posición específica.

let numeros = [1, 2, 3, 4, 5];

// Reemplaza 2 y 3 con 6 y 7
numeros.splice(1, 2, 6, 7);

console.log(numeros); // Salida: [1, 6, 7, 4, 5]

slice()

• Retorna una copia superficial de una porción del arreglo, sin modificar el arreglo original.

let colores = ["rojo", "verde", "azul"];

let subColores = colores.slice(1, 3);

console.log(subColores); // Salida: ["verde", "azul"]

Iteración a través de arrays

Podemos recorrer elementos de un array utilizando bucles como for, while, forEach, for...of, etc.:

let numeros = [1, 2, 3, 4, 5];
for (let i = 0; i < numeros.length; i++) {
  console.log(numeros[i]); // Imprime cada número
}

let colores = ["rojo", "verde", "azul"];
colores.forEach(function(color) {
  console.log(color); // Imprime cada color
});

Métodos de búsqueda y manipulación

indexOf() y lastIndexOf()

• indexOf(): Encuentra la primera posición de un elemento en el arreglo.
• lastIndexOf(): Encuentra la última posición de un elemento en el arreglo.

let numeros = [1, 2, 3, 2, 4, 5];

console.log(numeros.indexOf(2));      // Salida: 1
console.log(numeros.lastIndexOf(2));  // Salida: 3

includes()

• Verifica si un elemento existe en el arreglo.

let colores = ["rojo", "verde", "azul"];

console.log(colores.includes("verde")); // Salida: true
console.log(colores.includes("amarillo")); // Salida: false

join()

• Combina todos los elementos de un array en una cadena utilizando un separador:

let colores = ["rojo", "verde", "azul"];

let cadena = colores.join(", ");

console.log(cadena); // Salida: "rojo, verde, azul"

concat()

• Combina dos o más arreglos en uno nuevo.

let numeros = [1, 2, 3];
let otrosNumeros = [4, 5, 6];

let combinados = numeros.concat(otrosNumeros);

console.log(combinados); // Salida: [1, 2, 3, 4, 5, 6]

Ordenamiento de arrays

sort()

• Ordena los elementos de un arreglo en su lugar, utilizando la conversión a cadenas y la comparación de Unicode.

let frutas = ["naranja", "manzana", "plátano"];

frutas.sort();

console.log(frutas); // Salida: ["manzana", "naranja", "plátano"]

reverse()

• Invierte el orden de los elementos en el arreglo.

let numeros = [1, 2, 3, 4, 5];

numeros.reverse();

console.log(numeros); // Salida: [5, 4, 3, 2, 1]

Creación y manipulación funcional

map()

• Crea un nuevo arreglo con los resultados de aplicar una función a cada elemento del arreglo original.

let numeros = [1, 2, 3];

let duplicados = numeros.map(function(numero) {
  return numero * 2;
});

console.log(duplicados); // Salida: [2, 4, 6]

filter()

• Crea un nuevo arreglo con todos los elementos que pasen una prueba (función proporcionada).

let numeros = [1, 2, 3, 4, 5, 6];

let pares = numeros.filter(function(numero) {
  return numero % 2 === 0;
});

console.log(pares); // Salida: [2, 4, 6]

reduce()

• Aplica una función a un acumulador y a cada elemento en el arreglo (de izquierda a derecha) para reducirlo a un solo valor.

let numeros = [1, 2, 3, 4, 5];

let suma = numeros.reduce(function(acumulador, numero) {
  return acumulador + numero;
}, 0);

console.log(suma); // Salida: 15

Arreglos multidimensionales

Los arrays en JavaScript pueden contener otros arrays, lo que se conoce como arrays multidimensionales. Esto es útil cuando necesitamos trabajar con estructuras de datos más complejas, como por ejemplo matrices:

let matriz = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matriz[1][2]); // Salida: 6

Copia de arrays

La asignación directa de un array a otra variable simplemente copia la referencia, no los valores. Para crear una copia independiente, podemos utilizar el operador de propagación ..., el método slice() o concat().

let original = [1, 2, 3];
let copiaSpread = [...original];
let copiaSlice = original.slice();
let copiaConcat = original.concat();

console.log(copiaSpread); // [1, 2, 3]
console.log(copiaSlice);  // [1, 2, 3]
console.log(copiaConcat); // [1, 2, 3]

Consideraciones adicionales

• Los arrays en JavaScript son dinámicos, lo que significa que puedes agregar o eliminar elementos en cualquier momento.
• Los índices negativos no están permitidos en arrays (a diferencia de algunos lenguajes de programación como python).

Conclusión

Los arreglos en JavaScript son herramientas fundamentales para trabajar con colecciones de datos de manera organizada y eficiente. Puedes acceder, modificar y utilizar los elementos de un arreglo a través de índices, y aprovechar los métodos integrados para realizar operaciones comunes. Los arreglos te permiten gestionar datos de manera más estructurada, lo que es esencial para desarrollar aplicaciones más robustas y funcionales.

Test

Comprueba tus conocimientos con este test sobre arrays y otros conceptos relacionados con esta unidad.