Arrays en JavaScript

La mayor parte de los lenguajes de programación, entre los cuales se encuentra JavaScript, soportan la creación de arrays.

Un array es una colección de elementos que se organizan secuencialmente uno tras otro. Podrás crear un array, agregar elementos al mismo, actualizarlos o eliminarlos del array. Sin embargo, en JavaScript, los arrays no son un tipo de dato en sí mismo, sino que son objetos.

Crea un array

En JavaScript puedes crear arrays de dos formas diferentes. Puedes usar la función Array() o puedes usar la sintaxis literal []:

const arr = Array();
const arr = [];

Puedes inicializar un array con cualquier valor o conjunto de valores:

const arr = ['a', 'b'];

Un array puede contener cualquier tipo de elemento. Por ejemplo, puede contener números, cadenas de texto, objetos e incluso otros arrays:

const arr = [1, 2, 'Texto', { a: 1, b: 2}, ['a', 'b']];

Dado que un array también puede contener otros arrays, también puedes crear matrices, que son arrays multidimensionales:

const matriz = [
  ['1,1', '1,2', '1,3'],
  ['2,1', '2,2', '2,3'],
  ['3,1', '3,2', '3,3']
];

También podrás inicializar los elementos de un array con un valor usando el método fill(). En el siguiente ejemplo creamos un array de diez elementos y los inicializamos todos ellos a 0:

const arr = new Array(10).fill(0);

Accede a los elementos de un array

Podrás acceder a los elementos de un array mediante su índice, que comienza por el número 0 y va creciendo secuencialmente en una unidad con cada elemento. El índice de un elemento es el valor numérico que indica su orden en el interior del array:

const arr = ['a', 'b', 'c'];

console.log(arr[0]); // 'a'
console.log(arr[1]); // 'b'
console.log(arr[2]); // 'c'

Para acceder a los elementos de una matriz, tendrás que indicar el índice de cada uno de los arrays que conforman la matriz:

const matriz = [
  ['1,1', '1,2', '1,3'],
  ['2,1', '2,2', '2,3'],
  ['3,1', '3,2', '3,3']
];
console.log(matriz[0][0]); // '1,1'
console.log(matriz[1][2]); // '2,3'

Es importante que tengas en cuenta que el índice de los array siempre comienzan por el valor 0.

Número de elementos de un array

Puedes obtener el número de elementos de un array mediante la propiedad length, disponible para todos los arrays:

const arr = [1, 2, 3];
console.log(arr.length); //3

También podrás establecer el valor del atributo length. Si le asignas un número de elementos mayor que el número de elementos actual del array, no ocurrirá nada, pero le asignas un número inferior, el array pasará a contener el número de elementos especificado, eliminándose los restantes:

const arr = [1, 2, 3];
console.log(arr); //[ 1, 2, 3 ]
arr.length = 2;
console.log(arr); //[ 1, 2 ];

Añade elementos a un array

Para añadir un elemento al final de un array mediante JavaScript puedes usar el método push():

const arr = [1, 2];
arr.push(3);

console.log(arr); //[1, 2, 3]

Mediante el método push() puedes agregar más de un elemento al final del array:

arr.push(3, 4, 5);

También puedes agregar un elemento al inicio de un array mediante el método unshift():

const arr = [2, 3];
arr.unshift(1);

console.log(arr); //[1, 2, 3]

Mediante el método unshift() puedes agregar más de un elemento al inicio del array:

arr.unshift(-2, -1);

Eliminar elementos de un array

Para eliminar un elemento del final de un array mediante JavaScript puedes usar el método pop():

const arr = [1, 2, 3];
arr.pop();

console.log(arr); //[1, 2]

También puedes eliminar un elemento del inicio de un array mediante el método shift():

const arr = [1, 2, 3];
arr.shift();

console.log(arr); //[2, 3]

Busc elementos en un array

Con JavaScript, puedes encontrar un elemento en un array de una gran cantidad de formas. Por ejemplo, podrías querer encontrar el elemento en sí o también podrías querer obtener la posición del elemento en el array.

Encuentra un elemento en un array

Para encontrar un elemento en un array con JavaScript puedes usar el método find(), que ejecutará la función que le pasemos como parámetro para cada uno de los elementos del array. La función devolverá true si se ha encontrado el elemento o false en caso contrario:

arr.find( function(elemento, indice, array) {
  // devolver true o false
});

El método find() acepta el elemento del array para el que se ejecuta la función, el índice del elemento y el propio array como parámetros, aunque solamente se requiere el primer parámetro.

En caso de que el elemento no se encuentre una vez se haya ejecutado la función para todos los elementos, el método find() devolverá undefined.

En el siguiente ejemplo buscamos el elemento cuyo valor es 2:

arr.find( function(val) {
  return val === 2;
});

También podemos reescribir la función usando una función flecha, introducidas en JavaScript desde la versión ES6:

arr.find( val => val === 2 );

En  caso de tener el valor del elemento en la variable miValor, usaríamos la siguiente función para encontrar dicho elemento:

arr.find( valor => valor === miValor );

Encuentra el índice de un elemento en un array

Para encontrar el índice de un elemento en un array con JavaScript puedes usar el método findIndex(), que ejecutará la función que le pasemos como parámetro para cada uno de los elementos del array. La función devolverá el índice del elemento en caso de que esté en el array o -1 en caso contrario:

arr.findIndex( function (elemento, indice, array) {
  // devolver true o false
});

El método findIndex() acepta como parámetros el elemento del array para el que se ejecuta la función, el índice del elemento y el propio array, aunque solamente se requiere el primer parámetro.

En el siguiente ejemplo buscamos el elemento cuyo valor es b:

const arr = ['a', 'b', 'c'];
const indice = arr.findIndex( function(val) {
  return val === 'b';
});

console.log(indice); // 1

También podemos usar una función flecha:

const arr = ['a', 'b', 'c'];
const indice = arr.findIndex( val => val === 'b' );

console.log(indice); // 1

Comprueba si un elemento está en un array

Para saber si un elemento está en un array puedes usar el método includes(), que únicamente acepta el valor del elemento como parámetro y, opcionalmente, la posición en la que debería estar. El método devolverá true si el elemento está en el array o false en caso contrario:

arr.includes(valor);

En el siguiente ejemplo comprobamos si el valor 'a' está en el array:

const arr = ['a', 'b', 'c'];
const resultado = arr.includes('b');
console.log(resultado); // true

Si quieres saber si un elemento está en un array en una determinada posición, puedes usar el método includes() con un segundo parámetro, que será la posición en la que debería estar el elemento:

arr.includes(valor, indice);

En el siguiente ejemplo comprobamos si el valor 'b' está en la posición 1 del array:

const arr = ['a', 'b', 'c'];
const resultado = arr.includes('a', 1);
console.log(resultado); // true

Une dos o más arrays

Para unir dos o más arrays usando JavaScript puedes usar el método concat():

const arrA = [1, 2];
const arrB = [3, 4];
const arrC = arrA.concat(arrB);
console.log(arrC); //[1, 2, 3, 4]

Otra opción mediante la cual también podrás unir arrays consiste en usar el operador spread de propagación ... de este modo:

const arrA = [1, 2];
const arrB = [3, 4];
const arrC = [...arrA, ...arrB];
console.log(arrC); //[1,2,3,4]

Y esto ha sido todo.

---