Domina los arrays de JavaScript: Guía completa de creación, manipulación, filtrado y aplicaciones prácticas

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introducción

¿Qué son los arrays de JavaScript y por qué son importantes?

Los arrays de JavaScript son uno de los elementos esenciales para gestionar y manipular datos de forma eficiente. Al usar arrays, puedes almacenar múltiples valores en una sola variable y recuperarlos o modificarlos según sea necesario.
Por ejemplo, los arrays resultan extremadamente útiles al guardar una lista de nombres de usuario, un catálogo de productos o resultados de cálculos. Especialmente en el desarrollo de aplicaciones web, los arrays se utilizan con frecuencia al manejar datos de formularios o datos obtenidos de APIs.

Casos de uso prácticos de los arrays

• Gestión de listas: administrar artículos del carrito de compras o una lista de tareas.
• Filtrado de datos: funciones de búsqueda y ordenamiento de usuarios.
• Control de animaciones: gestionar el orden de elementos o cambios dinámicos.

Los arrays son una estructura fundamental para manejar datos agrupados y constituyen un tema esencial al aprender JavaScript.

Qué aprenderás en este artículo

Este artículo explica sistemáticamente los arrays de JavaScript, abordando temas como:

1. Cómo declarar e inicializar arrays
2. Cómo agregar, eliminar y obtener elementos
3. Técnicas de ordenamiento y filtrado
4. Métodos para combinar y dividir arrays
5. Ejemplos de aplicación usando arrays

El contenido es adecuado para principiantes e intermedios y explica cuidadosamente todo, desde los conceptos básicos hasta técnicas prácticas.

A quién va dirigido este artículo

• Principiantes: quienes manejan arrays por primera vez.
• Usuarios intermedios: quienes desean aprender operaciones avanzadas o escribir código más eficiente.

Con ejemplos de código y casos de uso prácticos, incluso los principiantes pueden aprender con confianza.

Qué puedes lograr al aprender arrays

Una vez que domines los arrays de JavaScript, adquirirás las siguientes habilidades:

• Gestión y manipulación de datos: agregar, eliminar o ordenar datos fácilmente.
• Integración de APIs: manejar y mostrar datos obtenidos de APIs web de forma eficiente.
• Desarrollo de aplicaciones: crear aplicaciones simples usando ejemplos prácticos.

Utiliza lo que aprendas aquí para construir aplicaciones JavaScript más avanzadas.

2. Conceptos básicos de arrays | Declaración e inicialización

2.1 Definición y rol de los arrays

Los arrays de JavaScript son objetos especiales que permiten gestionar múltiples elementos de datos a la vez. Cada elemento tiene un índice que determina su posición, lo que facilita la recuperación y manipulación de los datos.

Principales roles de los arrays

1. Gestión de listas: administrar datos agrupados como catálogos de productos o información de usuarios.
2. Manipulación de datos: realizar tareas eficientes como ordenamiento o búsqueda.
3. Procesamiento dinámico de datos: manejar y transformar datos obtenidos de APIs.

Características de los arrays

• Los índices de los elementos comienzan en 0.
• Se pueden almacenar valores de diferentes tipos de datos juntos.

  let mixedArray = [1, "hello", true];
  console.log(mixedArray[1]); // "hello"
  

2.2 Declarar e inicializar arrays

Declaración básica de un array

En JavaScript, los arrays pueden declararse de dos formas:

1. Usando notación literal (recomendado)

   let fruits = ["apple", "banana", "grape"];
   

2. Usando el constructor Array

   let fruits = new Array("apple", "banana", "grape");
   

Crear un array vacío

let emptyArray = [];

2.3 Declarar arrays multidimensionales

Un array multidimensional es un array que contiene otros arrays. Es útil al gestionar estructuras de datos jerárquicas.

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

console.log(matrix[1][2]); // 6

2.4 Notas sobre la inicialización

Mezcla de tipos de datos

Los arrays de JavaScript pueden almacenar valores de diferentes tipos de datos, lo que puede provocar errores inesperados si no se manejan con cuidado.

let mixed = [1, "text", true];
console.log(typeof mixed[0]); // "number"
console.log(typeof mixed[1]); // "string"
console.log(typeof mixed[2]); // "boolean"

2.5 Ejemplos básicos de operaciones con arrays

let animals = ["dog", "cat", "bird"];
console.log(animals[0]); // "dog"

animals.push("rabbit");
console.log(animals); // ["dog", "cat", "bird", "rabbit"]

animals[1] = "lion";
console.log(animals); // ["dog", "lion", "bird", "rabbit"]

Resumen

Esta sección explicó los siguientes conceptos sobre los arrays de JavaScript:

1. Definición y roles de los arrays
2. Sintaxis básica para la declaración e inicialización
3. Arrays multidimensionales y manejo de la longitud
4. Consideraciones importantes durante la inicialización con ejemplos de código

Con este conocimiento, estarás mejor preparado para el siguiente paso: “Operaciones básicas de arrays”.

3. Operaciones básicas de arrays | Añadir, eliminar y obtener elementos

3.1 Métodos para añadir elementos

Añadir elementos al final – push()

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

Añadir elementos al principio – unshift()

let animals = ["cat", "dog"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "cat", "dog"]

3.2 Métodos para eliminar elementos

Eliminar el último elemento – pop()

let colors = ["red", "blue", "green"];
let removed = colors.pop();
console.log(colors); // ["red", "blue"]
console.log(removed); // "green"

Eliminar el primer elemento – shift()

let numbers = [1, 2, 3, 4];
let removedNumber = numbers.shift();
console.log(numbers); // [2, 3, 4]
console.log(removedNumber); // 1

Eliminar elementos de cualquier posición – splice()

let sports = ["soccer", "baseball", "basketball", "tennis"];
sports.splice(1, 2);
console.log(sports); // ["soccer", "tennis"]

3.3 Métodos para obtener elementos

Obtener por índice

let drinks = ["water", "tea", "coffee"];
console.log(drinks[0]); // "water"
console.log(drinks[2]); // "coffee"

Obtener el último elemento

let cities = ["Tokyo", "Osaka", "Kyoto"];
console.log(cities[cities.length - 1]); // "Kyoto"

Obtener el primer elemento que coincida – find()

let numbers = [10, 20, 30, 40];
let result = numbers.find(num => num > 25);
console.log(result); // 30

Resumen

En esta sección, explicamos las siguientes operaciones de arrays en JavaScript:

1. Cómo añadir elementos (push() y unshift())
2. Cómo eliminar elementos (pop(), shift(), splice())
3. Cómo obtener elementos (acceso por índice, find(), includes())

Al combinar estas operaciones básicas, puedes manipular los arrays libremente.

4. Ordenar y filtrar arrays

4.1 Métodos para ordenar arrays

Ordenar en forma ascendente o descendente – sort()

let numbers = [40, 10, 30, 20];
numbers.sort((a, b) => a - b);
console.log(numbers); // [10, 20, 30, 40]

Invertir el orden – reverse()

let letters = ["a", "b", "c", "d"];
letters.reverse();
console.log(letters); // ["d", "c", "b", "a"]

4.2 Métodos para filtrar arrays

Extraer elementos que cumplan una condición – filter()

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

Obtener el primer elemento que cumpla una condición – find()

let ages = [15, 20, 25, 30];
let firstAdult = ages.find(age => age >= 20);
console.log(firstAdult); // 20

Obtener el índice del primer elemento que coincida – findIndex()

let scores = [50, 70, 85, 40];
let highScoreIndex = scores.findIndex(score => score > 80);
console.log(highScoreIndex); // 2

Resumen

Esta sección explicó cómo ordenar y filtrar arrays en JavaScript:

1. Ordenación: usar sort() y reverse() para controlar el orden.
2. Filtrado: usar filter() para extraer los elementos que coincidan.
3. Búsqueda: usar find() y findIndex() para localizar elementos.

5. Unir, dividir y transformar arrays

5.1 Métodos para unir arrays

Unir arrays – concat()

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = fruits.concat(vegetables);
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

Unir usando la sintaxis de propagación

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = [...fruits, ...vegetables];
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

5.2 Métodos para dividir arreglos

Extraer una porción – slice()

let colors = ["red", "blue", "green", "yellow", "purple"];
let selectedColors = colors.slice(1, 4);
console.log(selectedColors); // ["blue", "green", "yellow"]

Eliminar o reemplazar elementos – splice()

let languages = ["JavaScript", "Python", "Ruby", "Java"];
languages.splice(1, 2);
console.log(languages); // ["JavaScript", "Java"]

5.3 Métodos para transformar arreglos

Convertir arreglo a cadena – join()

let items = ["apple", "banana", "grape"];
let result = items.join(", ");
console.log(result); // "apple, banana, grape"

Convertir cadena a arreglo – split()

let str = "apple,banana,grape";
let arr = str.split(",");
console.log(arr); // ["apple", "banana", "grape"]

Aplanar un arreglo multidimensional – flat()

let numbers = [1, [2, 3], [4, [5, 6]]];
let flatNumbers = numbers.flat(2);
console.log(flatNumbers); // [1, 2, 3, 4, 5, 6]

Resumen

Esta sección explicó varios métodos de JavaScript para arreglos de unión, división y transformación:

1. Unir arreglos: concat() y sintaxis de propagación
2. Dividir arreglos: slice() para extracción y splice() para eliminación o reemplazo
3. Transformar arreglos: join() y split() para conversión a cadena
4. Aplanar: flat() para convertir arreglos anidados en una sola dimensión

6. Recorriendo arreglos y técnicas avanzadas

6.1 Métodos para recorrer arreglos

Recorrido básico con for

let fruits = ["apple", "banana", "grape"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Output: apple, banana, grape

Recorrido simplificado con for...of

let colors = ["red", "blue", "green"];
for (let color of colors) {
  console.log(color);
}
// Output: red, blue, green

Recorrido con el método forEach()

let animals = ["cat", "dog", "bird"];
animals.forEach((animal, index) => {
  console.log(`${index}: ${animal}`);
});
// Output: 0: cat, 1: dog, 2: bird

Crear un nuevo arreglo con map()

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

6.2 Técnicas avanzadas

Eliminar elementos duplicados

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Aplanar un arreglo – flat()

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

Resumen

Esta sección explicó los métodos de recorrido de arreglos y técnicas avanzadas:

1. Recorridos básicos: iteración eficiente usando for y for...of.
2. Recorridos basados en métodos: usando forEach() y map() para un procesamiento más limpio y funcional.
3. Manipulación avanzada de datos: eliminación de duplicados y aplanado de arreglos anidados.

7. Ejemplo práctico | Construyendo una aplicación sencilla usando arreglos

7.1 Creando una aplicación de lista de tareas

Resumen de funcionalidades

Esta sencilla aplicación de lista de tareas incluye las siguientes funcionalidades:

1. Añadir nuevas tareas
2. Eliminar tareas completadas
3. Mostrar la lista actual de tareas

Ejemplo de código

let tasks = [];

// Function to add a new task
function addTask(task) {
  tasks.push(task);
  console.log(`Added: ${task}`);
  displayTasks();
}

// Function to remove a task
function removeTask(index) {
  if (index >= 0 && index < tasks.length) { let removed = tasks.splice(index, 1); console.log(`Removed: ${removed[0]}`); displayTasks(); } else { console.log("Invalid index"); } } // Function to display current tasks function displayTasks() { console.log("Current Tasks:"); tasks.forEach((task, index) => {
    console.log(`${index + 1}: ${task}`);
  });
}

// Test execution
addTask("Study JavaScript");
addTask("Create shopping list");
addTask("Check email");

removeTask(1); // Remove the second task

Ejemplo de salida

Added: Study JavaScript
Added: Create shopping list
Added: Check email
Current Tasks:
1: Study JavaScript
2: Create shopping list
3: Check email
Removed: Create shopping list
Current Tasks:
1: Study JavaScript
2: Check email

Resumen

Esta sección introdujo una aplicación práctica usando operaciones con arrays:

1. Aplicación de lista de tareas : Se practicó agregar, eliminar y mostrar tareas.
2. Búsqueda y análisis de datos : Se demostró cómo implementar búsquedas flexibles y agregación de datos usando operaciones con arrays.

8. Resumen | Dominando las operaciones con arrays

Los arrays de JavaScript son herramientas poderosas que ayudan a simplificar la gestión y manipulación de datos. Este artículo cubrió todo, desde operaciones básicas hasta técnicas avanzadas y ejemplos prácticos.

8.1 Repaso de este artículo

1. Operaciones básicas con arrays

• Declaración e inicialización : Se aprendió a crear arrays y manejar arrays multidimensionales.
• Agregar, eliminar y obtener elementos : Se practicó la manipulación dinámica de datos usando métodos como push(), pop() y otros.

2. Ordenar y filtrar arrays

• Ordenar : Se explicó cómo modificar el orden de un array usando sort() y reverse().
• Filtrar : Se aprendió a extraer datos usando filter() y find().

3. Unir, dividir y transformar arrays

• Unir : Se comprendió cómo combinar arrays usando concat() y la sintaxis de propagación.
• Dividir y transformar : Se usaron slice(), splice(), join() y split() para un manejo flexible de los datos.

4. Recorrer y técnicas avanzadas

• Recorrer : Se utilizaron for, forEach() y map() para iteraciones eficientes.
• Técnicas avanzadas : Se aprendió a eliminar duplicados y a aplanar arrays anidados.

5. Ejemplos prácticos

• Aplicación de lista de tareas : Se aplicaron operaciones con arrays para crear una aplicación funcional.
• Búsqueda y agregación de datos : Se demostró el filtrado y análisis práctico de datos.

8.2 Importancia de las operaciones con arrays y casos de uso

¿Por qué son importantes las operaciones con arrays?

La manipulación de arrays es esencial para organizar, analizar y mostrar datos. Algunos escenarios comunes incluyen:

1. Gestión y visualización de datos : Filtrar datos de una API y mostrar los resultados en tablas.
2. Manejo de formularios e input de usuarios : Actualizar listas dinámicamente o procesar valores de entrada.
3. Funciones de búsqueda y ordenación : Gestionar grandes conjuntos de datos de forma eficiente.
4. Desarrollo de aplicaciones : Construir funcionalidades de UI como carritos de compra y gestores de tareas.

8.3 Próximos pasos en el aprendizaje

1. Uso adicional de métodos de arrays

• Tarea sugerida : Crear una aplicación que obtenga datos de una API y filtre los resultados usando operaciones con arrays.

2. Comparar y usar otras estructuras de datos

• Aprender Objetos, Set y Map para elegir la estructura adecuada en cada caso.

3. Aplicar el conocimiento en frameworks de JavaScript

• Utilizar habilidades con arrays en frameworks como React o Vue.js para desarrollo del mundo real.

8.4 Enlaces de referencia y recursos

• MDN Web Docs: Objeto Array https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
• JavaScript.info: Arrays y métodos https://javascript.info/

8.5 Reflexiones finales y consejos para los lectores

JavaScript y sus operaciones con arrays son esenciales para construir una base sólida de programación. Este artículo ofrece un enfoque estructurado, desde lo básico hasta conceptos avanzados.

Consejos

1. Practica escribiendo código : Prueba cada método para profundizar tu comprensión.
2. Desarrolla habilidades de resolución de problemas : Convierte tareas del mundo real en programas para mejorar tu experiencia práctica.
3. Continúa aprendiendo : Aprende nuevos frameworks y las tecnologías más recientes para ampliar tu conjunto de habilidades.

¡Da el siguiente paso!

Utiliza este artículo como base para avanzar hacia la creación de aplicaciones más complejas o para aprender frameworks modernos.

FAQ | Preguntas frecuentes

P1. ¿Cuál es la diferencia entre map() y forEach()?

• map() : Devuelve un nuevo array después de aplicar una función a cada elemento.
• forEach() : Ejecuta una función para cada elemento, pero no devuelve un nuevo array.

Ejemplo:

let numbers = [1, 2, 3];

// map()
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

// forEach()
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6

P2. ¿Cómo ordeno números correctamente?

Por defecto, sort() compara los valores como cadenas. Para ordenar números de forma numérica, debes pasar una función de comparación.
Ejemplo:

let numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 25, 40, 100]

P3. ¿Cómo puedo eliminar duplicados de un array?

Utiliza el objeto Set para eliminar duplicados de manera sencilla.
Ejemplo:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

P4. ¿Cómo verifico si un elemento existe en un array?

Usa el método includes() para determinar si el array contiene un valor específico.
Ejemplo:

let fruits = ["apple", "banana", "grape"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("melon")); // false

P5. ¿Cómo aplanar un array multidimensional?

Utiliza el método flat() para convertir un array anidado en un array de un solo nivel.
Ejemplo:

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]