Operaciones con arrays en JavaScript

Los arrays son una de las estructuras de datos fundamentales en JavaScript. Nos permiten almacenar múltiples valores en una sola variable, y son esenciales para manipular y gestionar colecciones de datos. En este artículo, exploraremos desde cómo declararlos hasta cómo realizar operaciones de búsqueda, agregar, borrar y modificar elementos, utilizando las técnicas más modernas de ECMAScript (ES6+).

Declaración de arrays

En JavaScript, los arrays se pueden declarar de varias formas. La manera más común es utilizando corchetes ([]), pero también se puede usar el constructor Array().

La declaración simple de un array con contenido de elementos de texto es como la que vemos en el siguiente ejemplo:

const frutas = ['manzana', 'banana', 'naranja'];

También podemos emplear la Declaración usando el constructor Array(). Para esta variante vamos a observar un ejemplo usando número, pero podría usarse perfectamente con elementos de texto:

const numeros = new Array(1, 2, 3, 4, 5);

Si necesitamos realizar la declaración de un array vacío, podemos usar la siguiente sintaxis:

const vacio = [];

Podemos acceder a los elementos del array utilizando su índice, recordando que los índices en JavaScript empiezan desde cero.

console.log(frutas[0]);  // 'manzana'
console.log(numeros[2]); // 3

Métodos básicos de arrays

1. Agregar elementos

Podemos agregar elementos a un array de varias maneras:

push(): agrega uno o más elementos al final del array.

frutas.push('cereza');
console.log(frutas);  // ['manzana', 'banana', 'naranja', 'cereza']

unshift(): agrega uno o más elementos al inicio del array.

frutas.unshift('frutilla');
console.log(frutas);  // ['frutilla', 'manzana', 'banana', 'naranja', 'cereza']

2. Eliminar elementos

pop(): elimina el último elemento del array.

frutas.pop();
console.log(frutas);  // ['frutilla', 'manzana', 'banana', 'naranja']

shift(): elimina el primer elemento del array.

frutas.shift();
console.log(frutas);  // ['manzana', 'banana', 'naranja']

3. Modificar elementos

Podemos modificar los elementos de un array directamente accediendo a su índice:

frutas[1] = 'kiwi';
console.log(frutas);  // ['manzana', 'kiwi', 'naranja']

4. Buscar elementos

indexOf(): retorna el índice de la primera aparición de un valor en el array, o -1 si no lo encuentra.

const index = frutas.indexOf('kiwi');
console.log(index);  // 1

includes() (ES6+): verifica si un array contiene un valor.

const existe = frutas.includes('naranja');
console.log(existe);  // true

5. Eliminar, agregar o modificar con splice()

El método splice() permite agregar, eliminar o reemplazar elementos en un array.

Eliminar:

frutas.splice(1, 1);  // Elimina 1 elemento a partir del índice 1
console.log(frutas);  // ['manzana', 'naranja']

Agregar:

frutas.splice(1, 0, 'banana', 'uva');  // Agrega dos elementos a partir del índice 1
console.log(frutas);  // ['manzana', 'banana', 'uva', 'naranja']

Modificar:

frutas.splice(2, 1, 'mango');  // Reemplaza 1 elemento en el índice 2
console.log(frutas);  // ['manzana', 'banana', 'mango', 'naranja']

6. Iterar sobre un array

Con ECMAScript 6, se introdujeron métodos modernos para recorrer un array de manera más eficiente.

forEach(): ejecuta una función para cada elemento del array.

frutas.forEach((fruta, index) => {
  console.log(`${index}: ${fruta}`);
});

map(): crea un nuevo array con los resultados de aplicar una función a cada elemento.

const frutasMayus = frutas.map(fruta => fruta.toUpperCase());
console.log(frutasMayus);  // ['MANZANA', 'BANANA', 'MANGO', 'NARANJA']

7. Filtrar y Buscar con filter() y find()

filter(): crea un nuevo array con todos los elementos que cumplan con una condición.

const frutasConA = frutas.filter(fruta => fruta.includes('a'));
console.log(frutasConA);  // ['manzana', 'banana', 'mango', 'naranja']

find(): retorna el primer elemento que cumpla con una condición.

const frutaEncontrada = frutas.find(fruta => fruta.startsWith('m'));
console.log(frutaEncontrada);  // 'manzana'

8. Reducir un array con reduce()

El método reduce() permite aplicar una función a un acumulador y cada elemento del array (de izquierda a derecha) para reducirlo a un solo valor.

const numeros = [1, 2, 3, 4, 5];
const suma = numeros.reduce((acumulador, valorActual) => acumulador + valorActual, 0);
console.log(suma);  // 15

Spread operator y Rest parameters

Spread Operator (...)

El spread operator permite expandir los elementos de un array. Es muy útil para copiar arrays o concatenar varios arrays.

const otrosFrutas = ['fresa', 'kiwi'];
const todasLasFrutas = [...frutas, ...otrosFrutas];
console.log(todasLasFrutas);  // ['manzana', 'banana', 'mango', 'naranja', 'fresa', 'kiwi']

Parámetros Rest

Rest parameters permiten representar un número indefinido de argumentos como un array.

function sumar(...numeros) {
  return numeros.reduce((acumulador, valorActual) => acumulador + valorActual, 0);
}

console.log(sumar(1, 2, 3));  // 6

En conclusión

JavaScript ofrece una completa gama de métodos y herramientas para trabajar con arrays de manera eficiente. Las técnicas modernas introducidas en ES6 y versiones posteriores, como el spread operator, map(), filter(), y reduce(), nos permiten manipular y procesar arrays de manera más poderosa y legible. Con estas herramientas, podemos manejar colecciones de datos de manera eficaz y escribir código más claro y conciso.

Comprender el funcionamiento de los arrays es esencial para cualquier desarrollador de JavaScript. Con estas técnicas estarás tendrás los conceptos básicos para manipulación de datos con este lenguaje.

Si te interesa saber más sobre JavaScript, déjame un comentario o escríbeme un mensaje.

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.