JavaScript Arrays

---

Una matriz es una variable especial que puede contener más de un valor:

const cars = ["Saab", "Volvo", "BMW"];

Ver ejemplo

---

¿Por qué utilizar matrices?

Si tienes una lista de elementos (una lista de nombres de automóviles, por ejemplo), almacenar los automóviles en variables individuales podría verse así:

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";

Sin embargo, ¿qué pasa si quieres recorrer los coches y encontrar uno específico? ¿Y si no tuvieras 3 coches, sino 300?

La solución es una matriz.

Una matriz puede contener muchos valores bajo un solo nombre y puede acceder a los valores haciendo referencia a un número de índice.

---

Creando una matriz

Usar un literal de matriz es la forma más sencilla de crear una matriz de JavaScript.

Sintaxis

const array_name = [item1, item2, ...];

Es una práctica común declarar matrices con la palabra clave const.

Obtén más información sobre const con matrices en el capítulo: JS Array Const.

Ejemplo:

const cars = ["Saab", "Volvo", "BMW"];

Ver ejemplo

Los espacios y los saltos de línea no son importantes. Una declaración puede abarcar varias líneas:

Ejemplo:

const cars = [
  "Saab",
  "Volvo",
  "BMW"
];

Ver ejemplo

También puedes crear una matriz y luego proporcionar los elementos:

Ejemplo:

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";

Ver ejemplo

---

Usando la palabra clave new JavaScript

El siguiente ejemplo también crea una matriz y le asigna valores:

Ejemplo:

const cars = new Array("Saab", "Volvo", "BMW");

Ver ejemplo

---

Los dos ejemplos anteriores hacen exactamente lo mismo.

No es necesario utilizar el nuevo Array().

Por simplicidad, legibilidad y velocidad de ejecución, utilice el método literal de matriz.

---

Accediendo a elementos de una matriz

Se accede a un elemento de matriz haciendo referencia al número de índice:

Ejemplo:

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

Ver ejemplo

Nota: Los índices de matriz comienzan con 0.

[0] es el primer elemento. [1] es el segundo elemento.

---

Cambiar un elemento de una matriz

Esta declaración cambia el valor del primer elemento en cars:

cars[0] = "Opel";

Ejemplo:

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";

Ver ejemplo

---

Convertir una matriz en una cadena

El método JavaScript toString() convierte una matriz en una cadena de valores de matriz (separados por comas).

Ejemplo:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Ver ejemplo

---

Acceda a la matriz completa

Con JavaScript, se puede acceder a la matriz completa haciendo referencia al nombre de la matriz:

Ejemplo:

const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Ver ejemplo

---

Las matrices son objetos

Las matrices son un tipo especial de objetos. El operador typeof en JavaScript devuelve "objeto" para matrices.

Pero las matrices de JavaScript se describen mejor como matrices.

Las matrices utilizan números para acceder a sus "elementos". En este ejemplo, person[0] devuelve John:

Array:

const person = ["John", "Doe", 46];

Ver ejemplo

---

Objeto:

Los objetos usan nombres para acceder a sus "miembros". En este ejemplo, person.firstName devuelve John:

const person = {firstName:"John", lastName:"Doe", age:46};

Ver ejemplo

---

Los elementos de la matriz pueden ser objetos

Las variables de JavaScript pueden ser objetos. Las matrices son tipos especiales de objetos.

Debido a esto, puedes tener variables de diferentes tipos en un mismo Array.

Puedes tener objetos en un Array. Puedes tener funciones en un Array. Puedes tener arrays en un Array:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

---

Propiedades y métodos de una matriz

La verdadera fortaleza de las matrices de JavaScript son las propiedades y métodos de matriz integrados:

cars.length   // Returns the number of elements
cars.sort()   // Sorts the array

Los métodos de matriz se tratan en los siguientes capítulos.

---

La propiedad length

La propiedad length de una matriz devuelve la longitud de una matriz (el número de elementos de la matriz).

Ejemplo:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;

Ver ejemplo

La propiedad length es siempre uno más que el índice de matriz más alto.

---

Accediendo al primer elemento de la matriz

Ejemplo:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];

Ver ejemplo

---

Accediendo al último elemento de la matriz

Ejemplo:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];

Ver ejemplo

---

Elementos de matriz en bucle

Una forma de recorrer una matriz es usar un bucle for:

Ejemplo:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

Ver ejemplo

También puedes usar la función Array.forEach():

Ejemplo:

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Ver ejemplo

---

Agregar elementos de matriz

La forma más sencilla de agregar un nuevo elemento a una matriz es utilizando el método push():

Ejemplo:

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // Adds a new element (Lemon) to fruits

Ver ejemplo

También se puede agregar un nuevo elemento a una matriz usando la propiedad length:

Ejemplo:

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon";  // Adds "Lemon" to fruits

Ver ejemplo

---

Advertencia

Agregar elementos con índices altos puede crear "agujeros" indefinidos en una matriz:

Ejemplo:

const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";  // Creates undefined "holes" in fruits

Ver ejemplo

---

Matrices asociativas

Muchos lenguajes de programación admiten matrices con índices con nombre.

Las matrices con índices con nombre se denominan matrices asociativas (o hashes).

JavaScript no admite matrices con índices con nombre.

En JavaScript, las matrices siempre usan índices numerados.

Ejemplo:

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;    // Will return 3
person[0];        // Will return "John"

Ver ejemplo

---

Advertencia

Si utilizas índices con nombre, JavaScript redefinirá la matriz como un objeto.

Después de eso, algunos métodos y propiedades de matriz producirán resultados incorrectos.

Ejemplo:

const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;     // Will return 0
person[0];         // Will return undefined

Ver ejemplo

---

La diferencia entre matrices y objetos

En JavaScript, las matrices utilizan índices numerados.

En JavaScript, los objetos utilizan índices con nombre.

Los arrays son un tipo especial de objetos, con índices numerados.

---

Cuándo utilizar matrices. Cuándo utilizar objetos.

• JavaScript no admite matrices asociativas.

• Debes usar objetos cuando quieras que los nombres de los elementos sean cadenas (texto).

• Debes usar matrices cuando quieras que los nombres de los elementos sean números.

---

JavaScript new array()

JavaScript tiene un constructor de matrices incorporado new Array().

Pero puedes usar [] de forma segura en su lugar.

Estas dos declaraciones diferentes crean una nueva matriz vacía llamada points:

const points = new Array();
const points = [];

Estas dos declaraciones diferentes crean una nueva matriz que contiene 6 números:

const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];

Ver ejemplo

---

La palabra clave new puede producir algunos resultados inesperados:

// Create an array with three elements:
const points = new Array(40, 100, 1);

Ver ejemplo

---

// Create an array with two elements:
const points = new Array(40, 100);

Ver ejemplo

---

// Create an array with one element ???
const points = new Array(40);

Ver ejemplo

---

Un error común:

const points = [40];

No es lo mismo que:

const points = new Array(40);

// Create an array with one element:
const points = [40];

Ver ejemplo

// Create an array with 40 undefined elements:
const points = new Array(40);

Ver ejemplo

---

Cómo reconocer una matriz

Una pregunta común es: ¿Cómo sé si una variable es una matriz?

El problema es que el operador JavaScript typeof devuelve "object":

const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;

Ver ejemplo

El operador typeof devuelve un objeto porque una matriz de JavaScript es un objeto.

---

Solución 1

Para resolver este problema, ECMAScript 5 (JavaScript 2009) definió un nuevo método Array.isArray():

Array.isArray(fruits);

Ver ejemplo

---

Solución 2

El operador instanceof devuelve verdadero si un constructor determinado crea un objeto:

const fruits = ["Banana", "Orange", "Apple"];

fruits instanceof Array;

Ver ejemplo

---

Referencia de matriz completa

Para obtener una referencia completa de Array, vaya a:

Referencia completa de matrices de JavaScript.

La referencia contiene descripciones y ejemplos de todas las propiedades y métodos de Array.

---

Traducido con 💚 desde W3Schools.com