23-Matrices (arrays) en Javascript

Array en ingles Matriz es una variable especial, que puede contener más de un valor:

ejemplo

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

Si tenemos por ejemplo muchsoc coches y los queremos almacenar en variables podria ser mas o menos asi:

ejemplo

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

Bueno, e este caso solo son 3 pero si fuera 300 o 3000 seria complicado, la solucion es un array (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

Sintaxis

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

Es una práctica común declarar arreglos con la palabra clave 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:

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

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

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

Uso de la palabra clave JavaScript new

Se puede crear arrays usando la palabra new

Ejemplo

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

---

Acceso a los elementos de la matriz

Para aceder a los elementos de una matriz (array) se utiliza el numero de indice

ejemplo

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";
 
Salida: Opel,Volvo,BMW
    

---

matriz completa

En Javascript se puede acer a una matriz (array) completa haciendo referencia al nombre de la matriz

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

---

Las matrices son objetos

Las matrices son un tipo especial de objetos.

El operador typeof en JavaScript devuelve "objeto" para arreglos

Pero si describimos las matrices como matrices se veen mejor

Las matrices usan numeros para aceder a sus elementos

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

Los objetos usan nombres para acceder a sus "miembros"

En este ejemplo, person.firstName devuelve Juan:

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

---

Los elementos de matriz pueden ser objetos

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

Debido a esto, puede tener variables de diferentes tipos en el misma matriz.

Puedes tener objetos en un Array. Puedes tener funciones en un Array. Puede tener arreglos en un Array:

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

---

Propiedades y métodos de matriz

La verdadera fuerza de las matrices de JavaScript son las propiedades de matriz incorporadas y métodos:

cars.length  // Devuelve el numero de elementos
cars.sort()   // Ordena la matriz
    

---

La propriedad length Longitud

La propriedad lenght devuelve la longitud de una matriz (el número de matrices elementos).

Ejemplo

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

---

Acceso al primer elemento del arreglo (Matriz)

Para aceder al primero elemento de un array usamos el indice, pero como los indices se iniciam em cero(0) pues ese es el primero elemento de ese array

Ejemplo

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

---

Acceso al último elemento del arreglo

Para aceder al ultimo elemento de un array usamos el signo (-) negativo seguido del 1

Ejemplo

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

---

Elementos de matriz en bucle

Una forma de recorrer un arreglo es usando un bucle for

Ejemplo

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

let text = "
";
for (let i = 0; i < fLen; i++) {
  text += "
" + fruits[i] + "
";
}
text += "
";
Salida:     
    Banana
    Orange
    Apple
    Mango
    

Tambien podemos usar el bucle forEach()

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "
";
fruits.forEach(myFunction);
text += "
";

function myFunction(value) {
  text += "
" + value + "
";
}
Salida:     
    Banana
    Orange
    Apple
    Mango
    

---

Adición de elementos de matriz

La forma más fácil de agregar un nuevo elemento a una matriz es usando el metodo push

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // Agrega un nuevo elemento (Limón) a las frutas
Salida:     
Banana,Orange,Apple,Lemon
    

Usando la propriedad lenght tambien se puede agregar un nuevo elemento a una matriz

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon";  // Agrega "Limón" a las frutas
Salida:     
Banana,Orange,Apple,Lemon
    

---

Nota si agregamos elementos a una matriz con indices altos, podemos crear "agujeros"

Ejemplo

const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Crea "agujeros" indefinidos en frutas
Salida:     
    Banana
    Orange
    Apple
    undefined
    undefined
    undefined
    Lemon
    

---

Matrices asociativas

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

Los arreglos con índices nombrados se llaman asociativos. 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;    // Devolverá 3
person[0];        // Devolvera "Jonh"

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 errores resultados _

Ejemplo

        const person = [];
        person["firstName"] = "John";
        person["lastName"] = "Doe";
        person["age"] = 46;
        person.length;     // Devolvera 0
        person[0];         // Devolvera 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 numeros _

---

nueva matriz ()

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

Pero se puede utilizar [] en cambio

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 palabra clave new puede producir algunos resultados inesperados:

// Crea una matriz con tres elementos:
 const points = new Array(40, 100, 1);
    

Crea array

// Crea un array con dos elementos
const points = new Array(40, 100);
    

// Crea un array con un elemento
const points = new Array(40); 
    

---

Un error común

const points = [40]; 
    

No es lo mismo que

const points = new Array(40); 
    

---

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 devolve un " object":

Ejemplo

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

Ir al indice