Matrices en JavaScript
Matrices en JavaScript. En este tutorial te enseñamos a crear una matriz, cómo se indexan las matrices y algunas de las tareas más comunes de trabajar en matrices, como crear, eliminar y modificar elementos. Muy Fácil y Rápido.
Introducción
Una matriz en JavaScript es un tipo de objeto global que se utiliza para almacenar datos. Las matrices consisten en una colección o lista ordenada que contiene cero o más tipos de datos, y utilizan índices numerados que comienzan en 0 para acceder a elementos específicos.
Las matrices son muy útiles ya que almacenan valores múltiples en una sola variable, lo que puede condensar y organizar nuestro código, haciéndolo más legible y mantenible. Las matrices pueden contener cualquier tipo de datos , incluidos números , cadenas y objetos .
Para demostrar cómo las matrices pueden ser útiles, considere asignar los cinco océanos del mundo a sus propias variables.
// Assign the five oceans to five variables
const ocean1 = "Pacific";
const ocean2 = "Atlantic";
const ocean3 = "Indian";
const ocean4 = "Arctic";
const ocean5 = "Antarctic";
Este método es muy detallado, y puede volverse difícil de mantener y realizar un seguimiento rápidamente.
Usando matrices, podemos simplificar nuestros datos.
// Assign the five oceans
let oceans = [
"Pacific",
"Atlantic",
"Indian",
"Arctic",
"Antarctic",
];
En lugar de crear cinco variables separadas, ahora tenemos una variable que contiene los cinco elementos. Usamos corchetes - [] - para crear una matriz.
Para acceder a un elemento específico, añada su índice a la variable.
// Print out the first item of the oceans array
oceans[0];
Output
Pacific
En este tutorial, aprenderemos a crear matrices; cómo están indexados; cómo agregar, modificar, eliminar o acceder a elementos en una matriz; y cómo recorrer las matrices.
Creando una matriz
Hay dos formas de crear una matriz en JavaScript:
- La matriz literal, que usa corchetes.
- El constructor de la matriz, que usa la
newpalabra clave.
Demostremos cómo crear una matriz de especies de tiburones utilizando la matriz literal, que se inicializa con [] .
// Initialize array of shark species with array literal
let sharks = [
"Hammerhead",
"Great White",
"Tiger",
];
Ahora aquí están los mismos datos creados con el constructor de la matriz, que se inicializa con la new Array() .
// Initialize array of shark species with array constructor
let sharks = new Array(
"Hammerhead",
"Great White",
"Tiger",
);
Ambos métodos crearán una matriz. Sin embargo, el método de matriz literal (corchetes) es mucho más común y preferido, ya que el new Array() método de constructor new Array() puede tener incoherencias y resultados inesperados. Es útil tener en cuenta el constructor de la matriz en caso de que lo encuentre al final de la línea.
Podemos imprimir una matriz completa, que mostrará lo mismo que nuestra entrada.
// Print out the entire sharks array
sharks;
Output
[ 'Hammerhead', 'Great White', 'Tiger' ]
Las matrices a menudo se utilizan para agrupar listas de tipos de datos similares, pero técnicamente pueden contener cualquier valor o una combinación de valores, incluidas otras matrices.
// Initialize array of mixed datatypes
let mixedData = [
"String",
null,
7,
[
"another",
"array",
],
];
Después de crear una matriz, podemos manipularla de muchas maneras, pero primero debemos entender cómo se indexan las matrices.
Nota: Puede ver el último elemento en una matriz con o sin una coma final. Esto se conoce como una coma al final . Es común verlos omitidos, pero generalmente se está prefiriendo incluirlos en su código, ya que esto hace que las diferencias de control de versión sean más claras, y hace que sea más fácil agregar y eliminar elementos sin errores. Tenga en cuenta que las comillas finales no están permitidas en los archivos JSON .
Matrices de indexación
Si ha aprendido a indexar y manipular cadenas en JavaScript , ya puede estar familiarizado con el concepto de matrices de indexación, ya que una cadena es similar a una matriz.
Las matrices no tienen pares de nombre / valor. En cambio, están indexados con valores enteros que comienzan con 0 . Aquí hay una matriz de ejemplo, asignada a seaCreatures .
let seaCreatures = [
"octopus",
"squid",
"shark",
"seahorse",
"starfish",
];
Aquí hay un desglose de cómo se indexa cada elemento en la matriz de seaCreatures .
| octopus | squid | shark | seahorse | starfish |
|---|---|---|---|---|
| 0 | 1 | 2 | 3 | 4 |
El primer elemento de la matriz es el octopus , que está indexado en 0 . El último elemento es starfish , que está indexado en 4 . El recuento comienza con 0 en los índices, lo que va en contra de nuestra intuición natural para comenzar a contar a 1, por lo que se debe tener especial cuidado en recordar esto hasta que se vuelva natural.
Podemos averiguar cuántos elementos hay en una matriz con la propiedad de length .
seaCreatures.length;
Output
5
Aunque los índices de seaCreatures consisten de 0 a 4 , la propiedad de length generará la cantidad real de elementos en la matriz, empezando por 1.
Si queremos averiguar el número de índice de un elemento específico en una matriz, como seahorse , podemos utilizar el método indexOf() .
seaCreatures.indexOf("seahorse");
Output
3
Si no se encuentra un número de índice, como para un valor que no existe, la consola devolverá -1 .
seaCreatures.indexOf("cuttlefish");
Output
-1
Con los números de índice que corresponden a los elementos dentro de una matriz, podemos acceder a cada elemento discretamente para trabajar con esos elementos.
Acceder a los elementos en una matriz
Se accede a un elemento en una matriz de JavaScript refiriéndose al número de índice del elemento entre corchetes.
seaCreatures[1];
Output
squid
Sabemos que 0 siempre generará el primer elemento en una matriz. También podemos encontrar el último elemento de una matriz al realizar una operación en la propiedad de length y aplicarla como el nuevo número de índice.
const lastIndex = seaCreatures.length - 1;
seaCreatures[lastIndex];
Output
starfish
Intentar acceder a un elemento que no existe devolverá undefined .
seaCreatures[10];
Output
indefinido
Para acceder a los elementos en una matriz anidada, debe agregar otro número de índice para que se corresponda con la matriz interna.
let nestedArray = [
[
"salmon",
"halibut",
],
[
"coral",
"reef",
]
];
nestedArray[1][0];
Output
coral
En el ejemplo anterior, nestedArray a la matriz en la posición 1 de la variable nestedArray , luego el elemento en la posición 0 en la matriz interna.
Agregar un elemento a una matriz
En nuestra variable seaCreatures teníamos cinco ítems, que consistían en los índices de 0 a 4 . Si queremos agregar un nuevo elemento a la matriz, podemos asignar un valor al siguiente índice.
seaCreatures[5] = "whale";
seaCreatures;
Output
[ 'octopus',
'squid',
'shark',
'seahorse',
'starfish',
'whale' ]
Si agregamos un elemento y accidentalmente omitimos un índice, creará un elemento indefinido en la matriz.
SeaCreatures [7] = "starfish"; criaturas del mar;
Output
[ 'octopus',
'squid',
'shark',
'seahorse',
'starfish',
'whale',
,
'pufferfish' ]
Intentar acceder al elemento adicional de la matriz devolverá undefined .
seaCreatures[6]
Output
undefined
Problemas como estos se pueden evitar utilizando el método push() , que agrega un elemento al final de una matriz.
// Append lobster to the end of the seaCreatures array
seaCreatures.push("lobster");
seaCreatures;
Output
[ 'octopus',
'squid',
'shark',
'seahorse',
'starfish',
,
'whale',
'pufferfish',
'lobster' ]
En el otro extremo del espectro, el método unshift() agregará un elemento al comienzo de una matriz.
// Append dragonfish to the beginning of the seaCreatures array
seaCreatures.unshift("dragonfish");
seaCreatures;
Output
[ 'dragonfish',
'octopus',
'squid',
'shark',
'seahorse',
'starfish',
'whale',
,
'pufferfish',
'lobster' ]
Entre push() y unshift() podrá agregar elementos al principio y al final de una matriz.
Eliminar un elemento de una matriz
Cuando queremos eliminar un elemento específico de una matriz, usamos el método splice() . En la matriz seaCreatures , accidentalmente creamos un elemento de matriz indefinido anteriormente, así que vamos a eliminarlo ahora.
seaCreatures.splice(7, 1);
seaCreatures;
Output
[ 'dragonfish',
'octopus',
'squid',
'shark',
'seahorse',
'starfish',
'whale',
'pufferfish',
'lobster' ]
En el método de splice() , el primer parámetro representa el número de índice que se eliminará (en este caso, 7 ), y el segundo parámetro es cuántos elementos deben eliminarse. Colocamos 1 , lo que significa que solo se eliminará un artículo.
El método de splice() cambiará la variable original. Si desea que la variable original permanezca sin cambios, utilice slice() y asigne el resultado a una nueva variable.
let newArray = slice(7, 1);
El método pop() eliminará el último elemento de una matriz.
// Remove the last item from the seaCreatures array
seaCreatures.pop();
seaCreatures;
Output
[ 'dragonfish',
'octopus',
'squid',
'shark',
'seahorse',
'starfish',
'whale',
'pufferfish' ]
lobster ha sido eliminada como el último elemento de la matriz. Para eliminar el primer elemento de la matriz, utilizaremos el método shift() .
// Remove the first item from the seaCreatures array
seaCreatures.shift();
seaCreatures;
Output
[ 'octopus',
'squid',
'shark',
'seahorse',
'starfish',
'whale',
'pufferfish' ]
Al usar pop() y shift() , podemos eliminar elementos del comienzo y el final de las matrices. Se prefiere utilizar pop() siempre que sea posible, ya que el resto de los elementos de la matriz conservan sus números de índice originales.
Modificar elementos en matrices
Podemos sobreescribir cualquier valor en una matriz asignando un nuevo valor usando el operador de asignación, tal como lo haríamos con una variable regular.
// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = "manatee";
seaCreatures;
Output
[ 'manatee',
'squid',
'shark',
'seahorse',
'starfish',
'whale',
'pufferfish' ]
Otra forma de modificar un valor es usar el método splice() con un nuevo parámetro. Si quisiéramos cambiar el valor del seahorse de seahorse , que es el ítem en el índice 3 , podríamos eliminarlo y agregar un nuevo ítem en su lugar.
// Replace seahorse with sea lion using splice method
seaCreatures.splice(3, 1, "sea lion");
seaCreatures();
Output
[ 'manatee',
'squid',
'shark',
'sea lion',
'starfish',
'whale',
'pufferfish' ]
En el ejemplo anterior, eliminamos el seahorse de seahorse del conjunto e insertamos un nuevo valor en el índice 3 .
Looping a través de una matriz
Podemos recorrer toda la matriz con la palabra clave for , aprovechando la propiedad de length . En este ejemplo, podemos crear una matriz de shellfish e imprimir cada número de índice así como también cada valor de la consola.
// Create an array of shellfish species
let shellfish = [
"oyster",
"shrimp",
"clam",
"mussel",
];
// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
console.log(i, shellfish[i]);
}
Output
0 'oyster'
1 'shrimp'
2 'clam'
3 'mussel'
También podemos usar el for...of loop, una característica más nueva de JavaScript.
// Create an array of aquatic mammals
let mammals = [
"dolphin",
"whale",
"manatee",
];
// Loop through each mammal
for (let mammal of mammals) {
console.log(mammal);
}
Output
dolphin
whale
manatee
El for...of loop no recupera el número de índice de los elementos en la matriz, pero generalmente es una forma más simple y concisa de recorrer una matriz.
El uso de bucles es extremadamente útil para imprimir todo el valor de una matriz, como cuando se muestran los elementos de una base de datos en un sitio web.
Conclusión
Las matrices son una parte extremadamente versátil y fundamental de la programación en JavaScript. En este tutorial, aprendimos cómo crear una matriz, cómo se indexan las matrices y algunas de las tareas más comunes de trabajar en matrices, como crear, eliminar y modificar elementos. También aprendimos dos métodos de bucle a través de matrices, que se utiliza como un método común para mostrar datos.
Puede leer más sobre otros tipos de datos en JavaScript al leer nuestro tutorial " Descripción de los tipos de datos en JavaScript ".
Fuente. Artículo traducido y con muy ligeras modificaciones de: https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript
