El lenguaje de programación JavaScript tiene la posibilidad de definir una matriz de variables en un objeto llamado Array. En JavaScript, una matriz también funciona como una lista, una pila o una cola.
A menudo nos encontramos con que necesitamos una colección ordenada , donde tenemos un primer, un segundo, un tercer elemento y así sucesivamente. Por ejemplo, necesitamos eso para almacenar una lista de algo: usuarios, productos, elementos HTML, etc. Y es por eso que el día de hoy empezaremos a manejar los Arrays en JS.
¿Cómo declarar un Array?
Existen dos sintaxis básicas para declarar una matriz o array vacía.
let arr = new Array(); let arr = [];
El 90% de los casos se usa la segunda sintaxis, ya que podemos suministrar elementos iniciales entre paréntesis. Por ejemplo:
let arr colores [ "amarillo", "azul", "rojo", "blanco"];
Los elementos en una matriz tienen su propia enumeración o sub-índice, con el que podemos acceder a un elemento del array.
Nota: El primer elemento siempre va a empezar por el sub-índice 0, y no por el sub-índice 1, de hecho; el sub-índice 1 le correspondería al segundo elemento del arrays.
let colores [ "amarillo", "azul", "rojo", "blanco"]; alert( colores[0] ); // amarillo alert( colores[1] ); // azul alert( colores[2] ); // rojo alert( colores[3] ); // blanco
También podemos sustituir elementos del array.
colores[3] = "verde"; // ahora el array será: ["amarillo", "azul", "rojo", "verde"];
O incluso, puedes agregar mas elementos a la matriz.
colores[4] = "celeste"; //ahora el array esta compuesto pot: ["amarillo", "azul", "rojo", "verde", "celeste"]
Podemos saber cuántos elementos hay en una matriz usando length.
let colores = [ "amarillo", "azul", "rojo"]; alert(colores.length ); //3
También podemos utilizar alert para mostrar todo el arrays.
let colores = ["amarillo", "azul", "rojo"]; alert ( colores ); //amarillo, azul, rojo
En una matriz pueden guardarse elementos de cualquier tipo.
// mezclando los valores
let arr = [ 'amarillo', { nombre: 'Juan' }, true, function() { alert('hola'); } ];
// obtenemos el objeto en el índice 1 y luego mostrar su nombre
alert( arr[1].nombre ); // Juan
[php]// obtener la función en el índice 3 y ejecutarla
arr[3](); // hola
Métodos pop / push, shift / unshift
Una cola es uno de los usos más comunes de una matriz. En informática, esto significa una colección ordenada de elementos que admite dos operaciones:
- Push: anexa un elemento al final.
- Shift: se obtiene un elemento desde el principio, avanzando en la cola, de modo que el segundo elemento se convierta en el primero.
Las matrices soportan ambas operaciones.
En la práctica lo encontramos muy a menudo. Por ejemplo, una cola de mensajes que deben mostrarse en pantalla.
Hay otro caso de uso para matrices: la estructura de datos llamada pila .
Soporta dos operaciones:
- Push: agrega un elemento al final.
- Pop: toma un elemento del final.
Así que los nuevos elementos se agregan o se toman siempre del «final».
Una pila generalmente se ilustra como un paquete de cartas: las nuevas cartas se agregan a la parte superior o se toman de la parte superior:
Para las pilas, el último artículo empujado se recibe primero, también se denomina principio de LIFO (último en entrar, primero en salir). Para las colas, tenemos FIFO (Primero en entrar, primero en salir).
Las matrices en JavaScript pueden funcionar como una cola y como una pila. Permiten agregar / eliminar elementos tanto desde el principio como desde el final.
En informática, la estructura de datos que lo permite se llama deque.
- Métodos utilizados al final de un array o matriz
Pop: extrae el último elemento de la matriz y lo devuelve.
let colores = ["Amarillo", "Naranja", "Verde"]; alert( colores.pop() ); // remueve "Verde" y lo alerta alert( colores ); // Amarillo, Naranja
Push: Agrega un elemento al final de una matriz.
let colores = ["Amarillo", "Naranja"];
colores.push("Verde");
alert( colores ); // Amarillo, Naranja, Verde
- Métodos que son utilizados al principio de la matriz
Shift: extrae el primer elemento de la matriz y lo devuelve.
let frutas = ["Pera", "Naranja", "Fresa"]; alert( frutas.shift() ); // Quita Pera y lo alerta alert( frutas ); // Naranja, Fresa
Unshift: agrega un elemento al principio de la matriz:
let frutas = ["Coco", "Fresa"];
frutas.unshift('Naranja');
alert( frutas ); // Naranja, Coco, Fresa
Los métodos push y unshift pueden agregar varios elementos a la vez:
let frutas = ["Naranja"];
frutas.push("Fresa", "Coco");
frutas.unshift("Piña", "Limón");
// ["Piña", "Limón", "Naranja", "Fresa", "Coco"]
alert( frutas );
Manipulando internamente la matriz
Una matriz es un tipo especial de objeto. Los corchetes utilizados para acceder a una propiedad arr[0] en realidad provienen de la sintaxis del objeto. Los números se utilizan como claves.
Extienden objetos que proporcionan métodos especiales para trabajar con colecciones ordenadas de datos y también con la propiedad length. Pero en el núcleo sigue siendo un objeto.
Recuerda, solo hay 7 tipos básicos en JavaScript. La matriz es un objeto y por lo tanto se comporta como un objeto.
Por ejemplo, se copia por referencia:
let frutas = ["Banana"]
let arr = frutas; // copiar por referencia (dos variables hacen referencia al mismo array)
alert( arr === frutas ); // true
arr.push("Pera"); // modificar el array por referencia
alert( frutas ); // Banana, Pear - son 2 items ahora
Pero lo que hace que los arreglos sean realmente especiales es su representación interna. El motor intenta almacenar sus elementos en el área de memoria contigua, uno tras otro, y también existen otras optimizaciones para hacer que los arreglos funcionen realmente rápido.
Pero todos se rompen si dejamos de trabajar con una matriz como con una «colección ordenada» y comenzamos a trabajar con ella como si fuera un objeto normal.
Por ejemplo, técnicamente podemos hacer esto:
let frutas = []; // formar una matriz frutas[99999] = 5; // asignar una propiedad con un índice muy superior a su longitud frutas.edad = 25; // crear una propiedad con un nombre arbitrario
Eso es posible, porque los arreglos son objetos en su base. Podemos añadirles cualquier propiedad.
Pero el motor verá que estamos trabajando con la matriz como con un objeto normal. Las optimizaciones específicas de la matriz no son adecuadas para tales casos y se desactivarán, sus beneficios desaparecerán.
Las formas de hacer mal uso de una matriz:
- Añadir una propiedad no numérica como arr.test = 5.
- Hacer agujeros, como: agregar arr[0]y luego arr[1000] (y nada entre ellos).
- Rellene la matriz en el orden inverso, como arr[1000], arr[999]y así sucesivamente.
Nota: Por favor, piense en los arreglos como estructuras especiales para trabajar con los datos ordenados . Proporcionan métodos especiales para eso. Las matrices se ajustan cuidadosamente dentro de los motores de JavaScript para trabajar con datos ordenados contiguos, utilízalos de esta manera. Y si necesita claves arbitrarias, es muy probable que realmente necesite un objeto normal.
