Matrices de JavaScript

Tabla de contenido

    Mostrar tabla de contenidos

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

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

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

</body>
</html>

¿Por qué utilizar matrices?

Si tiene una lista de elementos (una lista de nombres de automóviles, por ejemplo), almacenar los Los autos en variables individuales podrían 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 usted 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.

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

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

</body>
</html>

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"
];

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

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

</body>
</html>

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Usando la palabra clave JavaScript nueva

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Los dos ejemplos anteriores hacen exactamente lo mismo.

No es necesario utilizar new Array().

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

Accediendo a elementos de matriz

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

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Nota: Los índices de matriz comienzan con 0.

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

Cambiar 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";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Convertir una matriz en una cadena

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

Ejemplo

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

Resultado :

Banana,Orange,Apple,Mango

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

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

</body>
</html>

Acceda a la gama completa

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

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

</body>
</html>

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 esto ejemplo, persona[0] devuelve Juan:

Matriz:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Arrays use numbers to access its elements.</p>

<p id="demo"></p>

<script>
const person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>

</body>
</html>

Los objetos utilizan nombres para acceder a sus "miembros". En este ejemplo, persona.primerNombre devuelve Juan:

Objeto :

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>

<p>JavaScript uses names to access object properties.</p>
<p id="demo"></p>

<script>
const person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person.firstName;
</script>

</body>
</html>

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 el misma matriz.

Puedes tener objetos en un Array. Puedes tener funciones en un Array. Puede tener matrices en una matriz:

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 de matriz integradas y métodos:

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 propiedad longitud de una matriz devuelve la longitud de una matriz (el número de elementos).

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property returns the length of an array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>

</body>
</html>

La propiedad longitud 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];

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits[0];
</script>

</body>
</html>

Accediendo al último elemento de la matriz

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits[fruits.length-1];
</script>

</body>
</html>

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>";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Looping an Array</h2>

<p id="demo"></p>

<script>
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>";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

También puede utilizar 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>";
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>

<p>Call a function for each array element:</p>

<p id="demo"></p>

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

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

document.getElementById("demo").innerHTML = text;

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

</body>
</html>

Agregar elementos de matriz

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>

<p>The push method appends a new element to an array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits.push("Lemon");
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>The length property provides an easy way to append new elements to an array without using the push() method.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits[fruits.length] = "Lemon";
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

¡ADVERTENCIA!
<p>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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Adding elements with high indexes can create undefined "holes" in an array.</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";

let fLen = fruits.length;
let text = "";
for (i = 0; i < fLen; i++) {
  text += fruits[i] + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Matrices asociativas

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

Las matrices con índices con nombre se denominan asociativas. matrices (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"

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

¡¡ADVERTENCIA!!
Si utiliza índices con nombre, JavaScript redefinirá la matriz como un objeto.

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

Ejemplo:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.</p>

<p id="demo"></p>

<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

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.

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

  • Deberías usar arrays cuando quieras que los nombres de los elementos sean números.

JavaScript nueva matriz()

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 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];

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Creating an Array</h2>

<p>Avoid using new Array(). Use [] instead.</p>

<p id="demo"></p>

<script>
//const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

La palabra clave new puede producir algunos resultados inesperados:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Create an Array with three elements.</p>

<p id="demo"></p>

<script>
var points = new Array(40, 100, 1);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Create an Array with two elements.</p>

<p id="demo"></p>

<script>
var points = new Array(40, 100);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Avoid using new Array().</p>

<p id="demo"></p>

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

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];

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Create an Array with one element.</p>

<p id="demo"></p>

<script>
var points = [40];
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Avoid using new Array().</p>

<p id="demo"></p>

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

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 "objeto":

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The typeof Operator</h2>

<p>The typeof operator, when used on an array, returns object:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = typeof fruits;
</script>

</body>
</html>

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);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The isArray() Method</h2>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = Array.isArray(fruits);
</script>

</body>
</html>

Solución 2:

El operador instanceof devuelve verdadero si se crea un objeto por un constructor dado:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The instanceof Operator</h2>

<p>The instanceof operator returns true when used on an array:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits instanceof Array;
</script>

</body>
</html>

Referencia de matriz completa

Para obtener una referencia completa de Array, vaya a nuestro:

Referencia completa de matrices de JavaScript.

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