Matrices de JavaScript
Una matriz es una variable especial, que puede contener más de un valor:
const cars = ["Saab", "Volvo", "BMW"];
¿Por qué usar una matriz?
Si tiene una lista de elementos (una lista de nombres de automóviles, por ejemplo), almacenar los automóviles en variables individuales podría tener este aspecto:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
Sin embargo, ¿qué sucede si desea recorrer los autos 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.
Crear una matriz
El uso de un literal de matriz es la forma más fácil de crear una matriz de JavaScript.
Sintaxis:
const array_name = [item1, item2, ...];
Es una práctica común declarar arreglos con la palabra clave const .
Obtenga más información sobre const con arreglos en el capítulo: JS Array Const .
Ejemplo
const cars = ["Saab", "Volvo", "BMW"];
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"
];
También puede crear una matriz y luego proporcionar los elementos:
Ejemplo
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
Uso de la palabra clave JavaScript new
El siguiente ejemplo también crea un Array y le asigna valores:
Ejemplo
const cars = new Array("Saab", "Volvo", "BMW");
Los dos ejemplos anteriores hacen exactamente lo mismo.
No hay necesidad de usar new Array().
Por simplicidad, legibilidad y velocidad de ejecución, utilice el método literal de matriz.
Acceso a los elementos de la matriz
Accede a un elemento de matriz haciendo referencia al número de índice :
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
Nota: los índices de matriz comienzan con 0.
[0] es el primer elemento. [1] es el segundo elemento.
Cambio de un elemento de matriz
Esta declaración cambia el valor del primer elemento en cars:
cars[0] = "Opel";
Ejemplo
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
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;
Las matrices son objetos
Las matrices son un tipo especial de objetos. El typeofoperador en JavaScript devuelve "objeto" para matrices.
Pero, las matrices de JavaScript se describen mejor como matrices.
Las matrices usan números para acceder a sus "elementos". En este ejemplo, person[0]
devuelve John:
Formación:
const person = ["John", "Doe", 46];
Los objetos usan nombres para acceder a sus "miembros". En este ejemplo,
person.firstName
devuelve John:
Objeto:
const person = {firstName:"John", lastName:"Doe", age:46};
Los elementos de 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 el mismo Array.
Puedes tener objetos en un Array. Puedes tener funciones en un Array. Puedes tener arreglos en un Array:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Propiedades y métodos de matriz
La verdadera fortaleza de las matrices de JavaScript son las propiedades y los 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 de longitud
La lengthpropiedad 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;
La lengthpropiedad siempre es uno más que el índice de matriz más alto.
Acceso al primer elemento del arreglo
Ejemplo
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
Acceso al último elemento del arreglo
Ejemplo
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
Elementos de matriz en bucle
Una forma de recorrer una matriz es usando un forbucle:
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>";
También puedes usar la Array.forEach()función:
Ejemplo
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
}
Adición de elementos de matriz
La forma más fácil de agregar un nuevo elemento a una matriz es usando el push()método:
Ejemplo
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruits
También se puede agregar un nuevo elemento a una matriz usando la lengthpropiedad:
Ejemplo
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
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
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"
ADVERTENCIA !!
Si usa índices con nombre, JavaScript redefinirá la matriz en 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
La diferencia entre matrices y objetos
En JavaScript, las matrices usan índices numerados .
En JavaScript, los objetos usan índices con nombre .
Las matrices son un tipo especial de objetos, con índices numerados.
Cuándo usar arreglos. Cuándo usar Objetos.
- JavaScript no admite matrices asociativas.
- Debe utilizar objetos cuando desee que los nombres de los elementos sean cadenas (texto) .
- Debe utilizar matrices cuando desee que los nombres de los elementos sean números .
JavaScript nueva matriz ()
JavaScript tiene un constructor de matrices integrado new Array().
Pero puede usar de manera segura en su []lugar.
Estas dos declaraciones diferentes crean una nueva matriz vacía llamada puntos:
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];
La newpalabra clave puede producir algunos resultados inesperados:
// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);
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];
// Create an array with 40 undefined elements:
const points = new Array(40);
Cómo reconocer una matriz
Una pregunta común es: ¿Cómo sé si una variable es una matriz?
The problem is that the JavaScript operator typeof returns
"object":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
The typeof operator returns object because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():
Array.isArray(fruits);
Solution 2:
The instanceof operator returns true if an object is created
by a given constructor:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.