En programación, un arreglo es una colección de elementos o cosas. Los arreglos guardan data como elementos y los regresan cuando los necesitas. La estructura de datos de arreglo es ampliamente usada en todos los lenguajes de programación que la soportan.
A medida que trabajamos en nuestro código, se hace necesario agrupar valores en una misma variable, para representar conjuntos de datos con cierta relación entre sí. Para ello, tenemos la opción de crear objetos, o unas variables más sencillas llamadas arrays.
¿Qué es un Arreglo en JavaScript?
Un array es una colección o agrupación de elementos en una misma variable, cada uno de ellos ubicado por la posición que ocupa en el array. En algunas ocasiones también se les suelen llamar arreglos o vectores. Un par de square brackets [] representa un arreglo en JavaScript. Todos los elementos en un arreglo están separados por una comma(,).
En JavaScript, los arreglos pueden ser una colección de elementos de cualquier tipo. Esto significa que tú puedes crear un arreglo con elementos de tipo Cadena, Boolean, Número, Objetos, e incluso otros Arreglos.
Aquí hay un ejemplo de un arreglo con otros cuatro elementos: tipo Número, Boolean, Cadena y Objecto.
Lea también: IVA 21% Excel
const mixedTypedArray = [100, true, 'freeCodeCamp', {}];La posición de un elemento en el arreglo es conocido como indice. En JavaScript, el indice del arreglo empieza con 0, e incrementa uno a uno con cada elemento. El número de elementos en el arreglo determina su longitud. Curiosamente, los arreglos de JavaScript no tienen longitud fija. Tú puedes cambiar la longitud en cualquier momento asignando un valor numérico positivo.
Declaración de Arreglos en JavaScript
Tú puedes crear un arreglo de diferentes formas en JavaScript. La forma más sencilla es asignar un valor de arreglo a una variable, utilizando la notación literal con corchetes []. Esta es la notación preferida.
const salad = ['tomate', 'hongo', 'zanahoria', 'lechuga', 'maíz', 'pepino', 'aceituna'];const mesesDelAño = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
Por ejemplo, podríamos tener un array que en su primera posición tenemos el 'a', en la segunda el 'b' y en la tercera el 'c'. Al contrario que muchos otros lenguajes de programación, Javascript permite que se puedan realizar arrays de tipo mixto, no siendo obligatorio que todos los elementos sean del mismo tipo de dato.
También puedes usar el constructor de Arreglo para crear un arreglo:
const salad = new Array('tomate', 'hongo', 'zanahoria', 'lechuga', 'maíz', 'pepino', 'aceituna');Tenga en cuenta: new Array(2) creará un arreglo vacío de longitud 2 y ninguno de los elementos son definidos en él. Sin embargo, new Array(1,2) creará un arreglo de longitud dos con elementos 1 y 2 en él. Si sólo se indica un parámetro numérico size, Javascript creará un array vacío de size elementos. Es decir, no es lo mismo que const a = [3], donde creamos un array con un elemento 3. Por otro lado, new Array(size) realmente crea un array vacío que aún no ha sido rellenado con nada (esto hace que sea más óptimo para arrays grandes) y aunque es equivalente, no es exactamente igual new Array(3) que [undefined, undefined, undefined].
Lea también: Guía IVA reducido
Métodos de Declaración Comunes
En Javascript, los arrays se pueden definir de varias formas, aquí te mostramos un resumen:
| Constructor/Sintaxis | Descripción |
|---|---|
| new Array(size) | Crea un array vacío de tamaño size. Sus valores no están definidos. |
| new Array(e1, e2...) | Crea un array con los elementos indicados. |
| [e1, e2...] | Simplemente, los elementos dentro de corchetes: []. Notación preferida. |
Hay otros métodos como Array.of() y Array.from(), y el spread operador (...) que te ayuda a crear arreglos, también.
Acceso a Elementos del Arreglo
Tú puedes acceder y traer elementos de un arreglo usando su indice. Para acceder a un elemento específico del array, no hay más que utilizar el operador []. Por ejemplo, en el arreglo mixedTypedArray, el elemento 100 es en indice 0, true está en indice 1, 'freeCodeCamp' está en indice 2, y así.
const myStringArray = ['Manzana', 'Pera', 'Uva'];console.log(myStringArray[0]); // 'Manzana'
Además del clásico operador [], también podemos utilizar el método .at(), que permite índices negativos. Para valores negativos de i, cuenta hacia atrás desde el final del array.
const fruits = ['Manzana', 'Pera', 'Uva'];console.log(fruits.at(0)); // 'Manzana'console.log(fruits.at(-1)); // 'Uva'
Para saber el número elementos que tiene un array, solo hay que acceder a la propiedad .length, que nos devolverá el número de elementos existentes en un array.
Lea también: ¿Cómo localizar tus XML del SAT?
Añadir o Eliminar Elementos de un Arreglo
Existen varias formas de añadir elementos a un array ya existente. Ten en cuenta que en todos estos casos estamos mutando (variando los elementos del array ya existente). Para agregar elementos tenemos dos métodos push y unshift. Para eliminar elementos podemos utilizar pop ó shift.
Métodos para Modificar Arreglos
| Método | Descripción |
|---|---|
| .push(e1, e2...) | Añade uno o varios elementos al final del array. Devuelve el tamaño del array. |
| .pop() | Elimina el último elemento del array. Devuelve dicho elemento. |
| .unshift(e1, e2...) | Añade uno o varios elementos al inicio del array. Devuelve el tamaño del array. |
| .shift() | Elimina el primer elemento del array. Devuelve dicho elemento. |
Usa el método push() para añadir un elemento en el arreglo. El método push() añade un elemento al final del arreglo.
let salad = ['tomate', 'hongo', 'zanahoria'];salad.push('lechuga'); // Ahora salad es ['tomate', 'hongo', 'zanahoria', 'lechuga']// Devuelve el nuevo tamaño del array (4)Usa el método unshift() para añadir un elemento desde el principio del arreglo.
let salad = ['tomate', 'hongo', 'zanahoria'];salad.unshift('cebolla'); // Ahora salad es ['cebolla', 'tomate', 'hongo', 'zanahoria']// Devuelve el nuevo tamaño del array (4)La manera más sencilla de eliminar un solo elemento de un arreglo es usando el método pop(). Cada vez que llamas el método pop(), este elimina un elemento del final de un arreglo.
let salad = ['cebolla', 'tomate', 'hongo', 'zanahoria'];let lastElement = salad.pop(); // lastElement es 'zanahoria', salad es ['cebolla', 'tomate', 'hongo']
Usa el método shift() para eliminar un elemento desde el principio del arreglo.
let salad = ['cebolla', 'tomate', 'hongo'];let firstElement = salad.shift(); // firstElement es 'cebolla', salad es ['tomate', 'hongo']
Consideraciones Avanzadas de Arreglos
Los objetos te permiten almacenar colecciones de datos a través de nombres. Pero a menudo necesitamos una colección ordenada, donde tenemos un 1ro, un 2do, un 3er elemento y así sucesivamente. No es conveniente usar objetos aquí, porque no proveen métodos para manejar el orden de los elementos. Un array es una clase especial de objeto. Los corchetes usados para acceder a una propiedad arr[0] vienen de la sintaxis de objeto. Ellos extienden los objetos proveyendo métodos especiales para trabajar con colecciones ordenadas de datos y también la propiedad length. Piensa en los arrays como estructuras especiales para trabajar con datos ordenados. Ellos proveen métodos especiales para ello. Los arrays están cuidadosamente afinados dentro de los motores JavaScript para funcionar con datos ordenados contiguos, por favor úsalos de esa manera.
Propiedad length
La propiedad length automáticamente se actualiza cuando se modifica el array. Si la incrementamos manualmente, nada interesante ocurre. Pero si la decrementamos, el array se trunca. La propiedad length es la longitud del array o, para ser preciso, el último índice numérico más uno.
Arrays Multidimensionales
Los arrays pueden tener items que a su vez sean arrays. En JavaScript, los arreglos se pueden anidar. Esto significa que un arreglo puede tener otro arreglo como elemento. Él anidamiento de arreglo puede ir a más profundidad.
let frutas = ['Manzana', 'Pera', 'Uva', 'Plátano', ['Tomate', 'Cebolla', 'Zanahoria']];// Acceder a 'Zanahoria':console.log(frutas[4][2]); // returns 'Zanahoria'
Comparación de Arreglos
Para comparar arrays, no uses el operador == (como tampoco >, < y otros), ya que no tienen un tratamiento especial para arrays. Aquí, en ambos casos, comparamos un primitivo con un objeto array. Simple: no utilices el operador ==.
const arr1 = [1, 2, 3];const arr2 = [1, 2, 3];console.log(arr1 == arr2); // false (son objetos diferentes)
Otros Métodos para Crear y Manipular Arreglos
Array.from()
El método estático Array.from() se suele utilizar para convertir variables «parecidas» a los arrays (pero que no son arrays) en un array. De forma opcional, Array.from(obj) puede recibir un parámetro adicional: una función que actuará de forma idéntica a una función map(). Este método también acepta dos parámetros opcionales adicionales a nuestra cadena de texto. El método Array.from() retorna un Array a partir de la cadena de texto que se le pasa por parámetro.
const str = "hello";const arrFromString = Array.from(str); // ['h', 'e', 'l', 'l', 'o']const set = new Set(['a', 'b', 'c']);const arrFromSet = Array.from(set); // ['a', 'b', 'c']
Array.of()
El método Array.of() crea un nuevo arreglo usando cualquier número de elementos de cualquier tipo.
const newArray = Array.of(1, false, 'test', {'name': 'Alex'});// newArray contendrá [1, false, 'test', {name: 'Alex'}].concat()
El método concat() combina uno o más arreglos y regresa un arreglo combinado. Es un método inmutable. El método concat(), a diferencia de push(), no modifica el array sobre el cuál trabajamos y al que le añadimos los elementos, sino que simplemente lo devuelve. Al margen de esto, observa que en el caso de pasar un array por parámetro, push() lo inserta como un array, mientras que concat() inserta cada uno de sus elementos.
const first = [1, 2, 3];const second = [4, 5, 6];const merged = first.concat(second); // [1, 2, 3, 4, 5, 6]
.join() y .split()
El método join() junta todos los elementos de un arreglo usando un separador y regresa una cadena. Tú puedes pasar un separador de tu elección para juntar elementos. Su contrapartida es el método .split(), que permite crear un array a partir de un string.
const words = ['Hola', 'Mundo', 'JavaScript'];const sentence = words.join(' '); // "Hola Mundo JavaScript"const csv = "uno,dos,tres";const arrFromCsv = csv.split(','); // ["uno", "dos", "tres"]Spread Operator (...)
Desde ES6, podemos usar el ... (si, tres puntos consecutivos) como sintaxis spread y el resto de los parámetros en la desestructuración de arreglo. Para la sintaxis spread, el ... aparece en el lado derecho de la desestructuración. Para copiar y clonar un arreglo a un nuevo arreglo usando el operador spread. Tú puedes usar el operador spread para crear una copia del arreglo. El spread operator es de la nueva version de ES6 y funciona ya en todos los navegadores. Este nos ayuda extraer y propagar cada letra o caracter del string utilizado.
const arr = [1, 2, 3];const copyArr = [...arr]; // [1, 2, 3]const arr1 = ['a', 'b'];const arr2 = ['c', 'd'];const combined = [...arr1, ...arr2]; // ['a', 'b', 'c', 'd']
Desestructuración de Arreglos
Con ECMAScript 6 (ES6), tenemos una nueva sintaxis para extraer múltiples propiedades de un arreglo y asignarlas a variables de una sola vez. Es útil para ayudar a mantener tu código limpio y conciso. Esta nueva sintaxis es llamada sintaxis de desestructuración.
let [tomate, hongo, zanahoria] = ['Tomate', 'Hongo', 'Zanahoria'];console.log(tomate, hongo, zanahoria); // Output: Tomate Hongo Zanahoria
Saltar Valores en un Arreglo
Cuando estás desestructurando, tú puedes saltar un elemento de un arreglo a una variable. Por ejemplo, puedes no estar interesado en todos los elementos de un arreglo. En este caso, saltarse un valor es útil.
let [tomate, , zanahoria] = ['Tomate', 'Hongo', 'Zanahoria'];console.log(tomate); // 'Tomate'console.log(zanahoria); // 'Zanahoria'
Desestructurando Arreglos Anidados
Tú también puede acceder a elementos de arreglos anidados usando la sintaxis de desestructurado, como esto:
let [,,,,[,,zanahoria]] = ['Manzana', 'Pera', 'Uva', 'Plátano', ['Tomate', 'Cebolla', 'Zanahoria']];console.log(zanahoria); // 'Zanahoria'
Rest Parameter
Con el Resto del Parámetro (...), podemos organizar los elementos restantes de un arreglo en un nuevo arreglo. El resto de los parámetros deben ser la última variable en la sintaxis de desestructuración.
let [primero, segundo, ...resto] = ['Uno', 'Dos', 'Tres', 'Cuatro', 'Cinco'];console.log(primero); // 'Uno'console.log(segundo); // 'Dos'console.log(resto); // ['Tres', 'Cuatro', 'Cinco']
Métodos Iteradores de Arreglos
Hay muchos métodos muy útiles para iterar a través de un arreglo y realizar cálculos, tomar decisiones, filtrar cosas y más. Todos los métodos de arreglo iterativo toman funciones como un argumento. Tú necesitas especificar la lógica para iterar y aplicarla en la función.
.filter()
El método filter() crea un nuevo arreglo con todos los elementos que satisfagan la condición mencionada en la función.
const numbers = [10, 20, 30, 5, 15];const greaterThanTen = numbers.filter(num => num > 10); // [20, 30, 15]
.map()
El método map() crea un nuevo arreglo iterando a través de los elementos y aplicando la lógica que proveemos en la función como argumento.
const names = ['alex', 'bob'];const fullNames = names.map(name => name.toUpperCase()); // ['ALEX', 'BOB']
.reduce()
El método reduce() aplica la función reducer de cada elemento del arreglo y regresa el valor output.
const numbers = [1, 2, 3, 4];const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 10
.some() y .every()
El método some() regresa un valor booleano (verdadero/falso) basado al menos en un elemento en el arreglo pasando la condición en la función. El método every() detecta si cada elemento del arreglo satisface la condición pasada en la función.
const ages = [22, 35, 40];console.log(ages.some(age => age < 30)); // true (Existe un estudiante menor de 30)console.log(ages.every(age => age > 20)); // true (Todos son mayores de 20)
.find() y .findIndex()
El método find() regresa el primer elemento encontrado del arreglo que satisface la condición de la función. Los arreglos tienen otro metodo relacionado, findIndex(), eso regresa el índice del elemento que encontramos usando el método find(). Si no hay elementos que cumplan la condición el findIndex() regresa -1.
const students = [{name: 'Alex', age: 22}, {name: 'Bob', age: 35}];const youngStudent = students.find(student => student.age < 30); // {name: 'Alex', age: 22}const youngStudentIndex = students.findIndex(student => student.age < 30); // 0