Arrays de JavaScript explicados: conceptos básicos, operaciones y ejemplos prácticos

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 manera 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 listas de nombres de usuarios, catálogos de productos o resultados de cálculos. 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 para los arrays

• Gestión de listas: Administrar artículos del carrito de compras o listas de tareas.
• Filtrado de datos: Búsquedas de usuarios y funcionalidades de ordenación.
• Manejo de animaciones: Controlar el orden de los elementos y actualizaciones dinámicas.

De esta forma, los arrays son una estructura fundamental para manejar datos agrupados y un tema indispensable al aprender JavaScript.

Qué aprenderás en este artículo

Este artículo explica sistemáticamente los arrays de JavaScript con los siguientes temas:

1. Cómo declarar e inicializar arrays
2. Añadir, eliminar y recuperar elementos
3. Técnicas de ordenación y filtrado
4. Métodos de fusión y división de arrays
5. Ejemplos de aplicación práctica usando arrays

El contenido está diseñado tanto para principiantes como para aprendices intermedios, cubriendo cuidadosamente todo, desde operaciones básicas hasta técnicas avanzadas.

Público objetivo

• Principiantes: Aquellos que trabajan con arrays por primera vez.
• Desarrolladores intermedios: Aquellos que desean aprender operaciones de arrays más avanzadas y eficientes.

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

Qué puedes lograr al aprender arrays

Al dominar los arrays de JavaScript, adquirirás las siguientes habilidades:

• Gestión y manipulación de datos: Añadir, eliminar y ordenar datos fácilmente.
• Integración de APIs: Procesar y mostrar de forma eficiente los datos obtenidos de APIs web.
• Desarrollo de aplicaciones: Construir aplicaciones simples basadas en ejemplos prácticos.

Utiliza el conocimiento que adquieras aquí para crear programas más avanzados con JavaScript.

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

2.1 Definición y rol de los arrays

En JavaScript, un array es un objeto especial que permite gestionar múltiples valores a la vez. Cada elemento tiene un orden (índice), lo que facilita la recuperación y manipulación de los datos.

Principales roles de los arrays

1. Gestión de listas: Organizar listas de productos o información de usuarios.
2. Manipulación de datos: Procesamiento eficiente como ordenación y búsqueda.
3. Manejo dinámico de datos: Transformar y procesar datos obtenidos de APIs.

Características de los arrays

• Los índices comienzan en 0.
• Los elementos de diferentes tipos de datos pueden coexistir en el mismo array.

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

2.2 Declarar e inicializar arrays

Declaración básica de arrays

En JavaScript, los arrays pueden declararse mediante los dos métodos siguientes.

1. Usando literales de array (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 almacena arrays dentro de un array. 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 importantes al inicializar arrays

Mezcla de tipos de datos

Dado que los arrays de JavaScript pueden contener diferentes tipos de datos, esto puede generar errores no deseados si no se maneja 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 Arreglos

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

En esta sección cubrimos los siguientes temas relacionados con los arreglos en JavaScript:

1. La definición y el papel de los arreglos
2. Sintaxis básica para la declaración e inicialización
3. Arreglos multidimensionales e indexación
4. Consideraciones importantes y ejemplos de código prácticos

Al dominar estos fundamentos, podrás avanzar sin problemas al siguiente paso: operaciones básicas con arreglos.

3. Operaciones Básicas con Arreglos: Añadir, Eliminar y Recuperar

3.1 Cómo Añadir Elementos

Añadir un Elemento al Final – push()

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

Añadir un Elemento al Principio – unshift()

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

3.2 Cómo Eliminar Elementos

Eliminar un Elemento del Final – pop()

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

Eliminar un Elemento del Principio – 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 Cómo Recuperar Elementos

Recuperar por Índice

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

Obtener el Último Elemento de un Arreglo

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

Recuperar un Elemento que Cumpla una Condición – find()

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

Resumen

En esta sección cubrimos los siguientes puntos clave sobre las operaciones con arreglos en JavaScript:

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

Al combinar estas operaciones básicas, podrás manipular los arreglos de forma libre y eficaz.

4. Ordenar y Filtrar Arreglos

4.1 Cómo Ordenar Arreglos

Ordenar en Forma Ascendente/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 Cómo Filtrar Arreglos

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 Coincidente – findIndex()

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

Resumen

En esta sección explicamos en detalle cómo ordenar y filtrar arreglos en JavaScript.

1. Ordenación: controla el orden usando sort() y reverse().
2. Filtrado: usa filter() para extraer solo los elementos que cumplen una condición.
3. Búsqueda: encuentra elementos específicos con find() y findIndex().

5. Fusionar, dividir y transformar arrays

5.1 Cómo fusionar arrays

Fusionar arrays – concat()

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

Fusionar con 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 Cómo dividir arrays

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 Cómo transformar arrays

Convertir un array a una cadena – join()

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

Convertir una cadena a un array – split()

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

Aplanar un array 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

En esta sección, exploramos métodos para fusionar, dividir y transformar arrays de JavaScript.

1. Fusionar arrays usando concat() y la sintaxis de propagación.
2. Dividir arrays con slice() y modificarlos usando splice().
3. Transformar arrays y cadenas con join() y split().
4. Aplanar arrays anidados usando flat().

6. Recorrer arrays y técnicas avanzadas

6.1 Métodos para recorrer arrays

Recorrido básico con una sentencia for

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

Recorrido conciso con for...of

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

Recorrido con forEach()

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

Generar un nuevo array 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 array – flat()

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

Resumen

En esta sección, cubrimos técnicas de recorrido y uso avanzado de arrays.

1. Bucles básicos usando for y for...of.
2. Procesamiento eficiente y creación de arrays con forEach() y map().
3. Técnicas avanzadas como eliminar duplicados y aplanar arrays.

7. Ejemplo práctico: Construir una aplicación sencilla usando arrays

7.1 Creando una aplicación de lista de tareas

Visión general de las funcionalidades

Esta aplicación es una lista de tareas sencilla con 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();
}

javascript // Función para eliminar una tarea function removeTask(index) { if (index >= 0 && index < tasks.length) { let removed = tasks.splice(index, 1); console.log(Eliminado: ${removed[0]}); displayTasks(); } else { console.log(«Índice inválido»); } }

// Función para mostrar las tareas actuales function displayTasks() { console.log(«Tareas actuales:»); tasks.forEach((task, index) => { console.log(${index + 1}: ${task}); }); }

// Ejecución de prueba addTask(«Study JavaScript»); addTask(«Create a shopping list»); addTask(«Check emails»);

removeTask(1); // Eliminar la segunda tarea

### Sample Output

Añadido: Study JavaScript Añadido: Create a shopping list Añadido: Check emails Tareas actuales: 1: Study JavaScript 2: Create a shopping list 3: Check emails Eliminado: Create a shopping list Tareas actuales: 1: Study JavaScript 2: Check emails

### Summary



In this section, we introduced a practical application that leverages array operations.



1. **Todo List Application** : Practiced adding, removing, and displaying elements using arrays.
2. **Search and Data Aggregation** : Demonstrated flexible data handling through array manipulation.







## 8. Conclusion: Mastering Array Operations



JavaScript arrays are powerful tools for efficiently managing and manipulating data. This article comprehensively covered everything from basic operations to advanced techniques and practical examples.



### 8.1 Article Recap



#### 1. Basic Array Operations



* **Declaration and initialization** : Learned how to create arrays and work with multidimensional structures.
* **Adding, removing, and retrieving elements** : Practiced dynamic data manipulation using methods such as `push()` and `pop()` .



#### 2. Sorting and Filtering Arrays



* **Sorting** : Explained how to change element order using `sort()` and `reverse()` .
* **Filtering** : Demonstrated how to extract data that meets specific conditions using `filter()` and `find()` .



#### 3. Merging, Splitting, and Transforming Arrays



* **Merging** : Mastered flexible merging using `concat()` and the spread syntax.
* **Splitting and transforming** : Manipulated data using `slice()` , `splice()` , `join()` , and `split()` .



#### 4. Looping and Advanced Techniques



* **Looping** : Improved efficiency with `for` , `forEach()` , and `map()` .
* **Advanced techniques** : Learned duplicate removal and array flattening.



#### 5. Practical Example



* **Todo List Application** : Experienced how array operations are applied in real-world applications.
* **Search and data aggregation** : Implemented flexible searching and data processing.



### 8.2 Why Array Operations Matter



#### Why Are Array Operations Important?



Array operations are essential skills for organizing, analyzing, and displaying data. They are frequently used in the following scenarios:



1. **Data management and presentation** : Filtering API data and displaying it in tables.
2. **Form and user input handling** : Dynamically managing lists and processing inputs.
3. **Search and sorting features** : Efficiently handling large datasets.
4. **Application development fundamentals** : Building UI components such as shopping carts and task management systems.



### 8.3 Next Steps in Learning



#### 1. Further Use of Array Methods



* **Suggested challenge** : Build an application that displays and filters API data using array operations.



#### 2. Comparing and Choosing Other Data Structures



* Learn **Objects** , **Set** , and **Map** to choose the right structure for each use case.



#### 3. Practical Use in JavaScript Frameworks



* Apply these skills in frameworks such as React or Vue.js.



### 8.4 Reference Links and Resources



* **MDN Web Docs: Array Object**  <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array>
* **JavaScript.info: Arrays and Methods**  <https://javascript.info/>



### 8.5 Final Advice for Readers

JavaScript y las operaciones con arrays son cruciales para construir una base sólida de programación. Este artículo te guiará a través de técnicas tanto fundamentales como avanzadas.

Consejos

1. Practica de forma práctica : Escribe y prueba código para reforzar tu comprensión.
2. Desarrolla habilidades de resolución de problemas : Traduce problemas del mundo real a código.
3. Comprométete con el aprendizaje continuo : Mantente al día con técnicas y frameworks modernos.

¡Pasa al siguiente paso!

Utiliza este artículo como base y continúa construyendo aplicaciones más avanzadas y aprendiendo frameworks modernos.

Preguntas frecuentes (FAQ)

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

• map() : Devuelve un nuevo array. Aplica una transformación a cada elemento y recopila los resultados.
• forEach() : No devuelve un nuevo array y simplemente ejecuta una función para cada elemento.

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

Q2. ¿Cómo puedo ordenar números correctamente?

El método sort() compara los elementos como cadenas por defecto. Para ordenar números adecuadamente, debes proporcionar 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]

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

Puedes eliminar duplicados fácilmente usando el objeto Set.

Ejemplo:

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

Q4. ¿Cómo puedo comprobar si un elemento existe en un array?

Utiliza el método includes() para determinar si un elemento específico existe en un array.

Ejemplo:

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

Q5. ¿Cómo puedo convertir un array multidimensional en un array unidimensional?

Usa el método flat() para aplanar arrays anidados.

Ejemplo:

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