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.