Qué es un arreglo en JavaScript y sus operaciones básicas

Resumen: en este tutorial, aprenderás sobre los arreglos en JavaScript y sus operaciones básicas.

Introducción a array de JavaScript

En JavaScript, un array es una lista ordenada de valores. Cada valor se denomina elemento especificado por un índice:

Un array de JavaScript tiene las siguientes características:

• Primero, un array puede contener valores de tipos mixtos. Por ejemplo, puede tener un array que almacene elementos con números, cadena, booleanos y nulos.
• En segundo lugar, el tamaño de un array es dinámico y de crecimiento automático.

En otras palabras, no necesitas especificar el tamaño de la matriz por adelantado.

Creación de array en JavaScript

JavaScript proporciona dos formas de crear un array. El primero es usar el constructor Array de la siguiente manera:

let scores = new Array();

El array scores está vacío, no que contiene elementos.

Si conoces la cantidad de elementos que contendrá la matriz, puedes crear una matriz con un tamaño inicial como se muestra en el siguiente ejemplo:

let scores = Array(10);

Para crear un array e inicializarlo con algunos elementos, pasa los elementos como una lista separada por comas al constructor Array().

Por ejemplo, lo siguiente crea un array de puntajes que tiene cinco elementos (o números):

let scores = new Array(9,10,8,7,6);

Ten en cuenta que si usas el constructor Array() para crear una matriz y pasarle un número, estás creando una matriz con un tamaño inicial.

Sin embargo, cuando pasas un valor de otro tipo como una cadena al constructor Array(), creas un array con un elemento de ese valor. Por ejemplo:

let athletes = new Array(3); // crea un array con tamaño inicial 3
let scores = new Array(1, 2, 3); // crear un array con tres números 1,2 3
let signs = new Array('Red'); // crea un array con un elemento 'Rojo'

JavaScript permite omitir el operador new cuando usas el constructor Array(). Por ejemplo, la siguiente declaración crea el array de artistas.

let artists = Array();

En la práctica, rara vez utilizarás el constructor Array() para crear una matriz.

La forma preferida de crear una matriz es usar la notación literal de matriz:

let arrayName = [element1, element2, element3, ...];

La forma literal del array usa los corchetes [] para envolver una lista de elementos separados por comas.

El siguiente ejemplo crea el array de colores que contiene elementos de cadena:

let colors = ['red', 'green', 'blue'];

Para crear un array vacío, usa corchetes sin especificar ningún elemento como este:

let emptyArray = [];

Acceso a elementos de un array en JavaScript

Los arreglos en JavaScript están indexados en base cero. En otras palabras, el primer elemento de un array comienza en el índice 0, el segundo elemento comienza en el índice 1 y así sucesivamente.

Para acceder a un elemento en un array, especifica un índice entre corchetes []:

arrayName[index]

A continuación, se muestra cómo acceder a los elementos de un array de montañas:

let mountains = ['Everest', 'Fuji', 'Nanga Parbat'];

console.log(mountains[0]); // 'Everest'
console.log(mountains[1]); // 'Fuji'
console.log(mountains[2]); // 'Nanga Parbat'

Para cambiar el valor de un elemento, asigna ese valor al elemento de esta manera:

let mountains = ['Everest', 'Fuji', 'Nanga Parbat'];
mountains[2] = 'K2';

console.log(mountains);

Resultado:

[ 'Everest', 'Fuji', 'K2' ]

Obtener el tamaño del array

Normalmente, la propiedad length de un array devuelve el número de elementos. El siguiente ejemplo muestra cómo usar la propiedad length:

let mountains = ['Everest', 'Fuji', 'Nanga Parbat'];
console.log(mountains.length); // 3

Operaciones básicas en arreglos

A continuación, se explican algunas operaciones básicas en arreglos. Y aprenderás operaciones avanzadas como map(), filter() y reduce() en los próximos tutoriales.

1) Agregar un elemento al final en el arreglo

Para agregar un elemento al final de un array, utiliza el método push():

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
seas.push('Red Sea');

console.log(seas);

Resultado:

[ 'Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea', 'Red Sea' ]

2) Agregar un elemento al comienzo de un array

Para agregar un elemento al comienzo de un arreglo, utiliza el método unshift():

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
seas.unshift('Red Sea');

console.log(seas);

Resultado:

[ 'Red Sea', 'Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea' ]

3) Eliminar un elemento del final de un arreglo

Para eliminar un elemento del final de un array, utiliza el método pop():

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
const lastElement = seas.pop();
console.log(lastElement);

Resultado:

Baltic Sea

4) Eliminar un elemento del comienzo de un arreglo

Para eliminar un elemento del principio de un array, utiliza el método shift():

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
const firstElement = seas.shift();

console.log(firstElement);

Resultado:

Black Sea

5) Encontrar un índice de un elemento en el array

Para encontrar el índice de un elemento, utiliza el método indexOf():

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
let index = seas.indexOf('North Sea');

console.log(index); // 2

6) Comprobar si una variable es un array

Para comprobar si una variable es un array, utiliza el método Array.isArray():

console.log(Array.isArray(seas)); // true

Resumen

• En JavaScript, un array es una lista ordenada de valores. Cada valor se denomina elemento especificado por un índice.
• Un array puede contener valores de tipos mixtos.
• Los arreglos en JavaScript son dinámicas, lo que significa que crecen o se reducen según sea necesario.