Un array es una variable especial, que puede contener más de un valor:
Pruébalo tú mismo «
¿Por qué usar arrays?
Si tienes una lista de elementos (una lista de nombres de coches, por ejemplo), almacenar los coches en variables individuales podría ser así:
let car2 = «Volvo»;
let car3 = «BMW»;
Sin embargo, ¿qué pasa si quieres hacer un bucle a través de los coches y encontrar uno específico? ¿Y qué pasaría si no tuvieras 3 coches, sino 300?
¡La solución es un array!
Un array puede contener muchos valores bajo un mismo nombre, y puedes acceder a los valores haciendo referencia a un número de índice.
Creación de un Array
Usar un literal de array es la forma más sencilla de crear un Array en JavaScript.
Sintaxis:
Es una práctica común declarar arrays con la palabra clave const.
Aprende más sobre const con arrays en el capítulo: JS Array Const.
Ejemplo
Pruébalo tú mismo»
Los espacios y saltos de línea no son importantes. Una declaración puede abarcar varias líneas:
Ejemplo
Pruébalo tú mismo «
También puedes crear un array, y luego proporcionar los elementos:
Ejemplo
coches= «Saab»;
coches= «Volvo»;
coches= «BMW»;
Pruébalo tú mismo «
Usando la palabra clave de JavaScript new
El siguiente ejemplo también crea un Array, y le asigna valores:
Ejemplo
Pruébalo tú mismo «
Los dos ejemplos anteriores hacen exactamente lo mismo.
No es necesario utilizar new Array().
Por simplicidad, legibilidad y velocidad de ejecución, utiliza el método literal del array.
Acceso a elementos del array
Accedes a un elemento del array haciendo referencia al número de índice:
let coche = coches;
Pruébalo tú mismo «
Nota: Los índices de las matrices empiezan por 0.
es el primer elemento. es el segundo elemento.
Cambiar un elemento de la matriz
Esta sentencia cambia el valor del primer elemento de cars:
Ejemplo
coches = «Opel»;
Pruébalo tú mismo «
Acceder al array completo
Con JavaScript, se puede acceder al array completo haciendo referencia al nombre del array:
Ejemplo
document.getElementById(«demo»).innerHTML = coches;
Prueba tú mismo «
Los arrays son objetos
Los arrays son un tipo especial de objetos. El operador typeof en JavaScript devuelve «objeto» para los arrays.
Pero, los arrays de JavaScript se describen mejor como arrays.
Los arrays utilizan números para acceder a sus «elementos». En este ejemplo, person devuelve John:
Array:
Pruébalo tú mismo»
Los objetos utilizan nombres para acceder a sus «miembros». En este ejemplo, person.firstNamedevuelve John:
Objeto:
Pruébalo tú mismo «
Los elementos de la matriz pueden ser objetos
Las variables de JavaScript pueden ser objetos. Los Arrays son tipos especiales de objetos.
Por ello, puedes tener variables de diferentes tipos en el mismo Array.
Puedes tener objetos en un Array. Puedes tener funciones en un Array. Puedes tener arrays en un Array:
miArray = miFunción;
miArray = misCoches;
Propiedades y métodos de los arrays
La verdadera fuerza de los arrays en JavaScript son las propiedades y métodos de los arrays incorporados:
cars.sort() // Ordena el array
Los métodos de los arrays se tratan en los siguientes capítulos.
La propiedad length
La propiedad lengthde un array devuelve la longitud de un array (el número de elementos del array).
Ejemplo
let length = frutas.length;
Pruébalo tú mismo»
La propiedad lengthes siempre uno más que el índice más alto del array.
Acceso al primer elemento de la matriz
Ejemplo
let frutas = frutas;
Pruébalo tú mismo «
Acceso al último elemento de la matriz
Ejemplo
let frutas = frutas;
Pruébalo tú mismo»
Looping Array Elements
Una forma de hacer un bucle a través de un array, es utilizando un bucle for:
Ejemplo
let fLen = frutas.length;
let text = «<ul>»;
for (let i = 0; i < fLen; i++) {
text += «<li>» + frutas + «</li>»;
}
texto += «</ul>»;
Pruébalo tú mismo»
También puedes utilizar la función Array.forEach():
Ejemplo
let texto = «<ul>»;
frutas.forEach(myFunction);
text += «</ul>»;
function myFunction(value) {
text += «<li>» + valor + «</li>»;
}
Pruébelo usted mismo «
Añadir elementos a una matriz
La forma más sencilla de añadir un nuevo elemento a una matriz es utilizando el método push():
Ejemplo
frutas.push(«Limón»); // Añade un nuevo elemento (Limón) a frutas
Prueba tú mismo»
También se puede añadir un nuevo elemento a un array utilizando la propiedad length:
Ejemplo
frutas = «Limón»; // Añade «Limón» a frutas
Pruébalo tú mismo «
¡AVISO!
Añadir elementos con índices altos puede crear «agujeros» indefinidos en un array:
Ejemplo
frutas = «Limón»; // Crea «agujeros» indefinidos en frutas
Pruébalo tú mismo «
Arrays asociativos
Muchos lenguajes de programación admiten arrays con índices con nombre.
Los arrays con índices nombrados se llaman arrays asociativos (o hashes).
JavaScript no soporta arrays con índices nombrados.
En JavaScript, los arrays siempre utilizan índices numerados.
Ejemplo
persona = «John»;
persona = «Doe»;
persona = 46;
persona.length; // Devolverá 3
persona; // Devolverá «John»
Pruébalo tú mismo»
¡Atención!
Si utiliza índices con nombre, JavaScript redefinirá el array a un objeto.
Después de eso, algunos métodos y propiedades del array producirán resultados incorrectos.
Ejemplo:
persona = «John»;
persona = «Doe»;
persona = 46;
persona.length; // Devolverá 0
persona; // Devolverá undefined
Pruebe usted mismo «
La diferencia entre arrays y objetos
En JavaScript, los arrays 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 arrays. Cuándo utilizar objetos.
- JavaScript no admite matrices asociativas.
- Debe utilizar objetos cuando desee 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 new Array()
JavaScript tiene un constructor de array incorporado new Array().
Pero puedes usar con seguridad en su lugar.
Estas dos sentencias diferentes crean una nueva matriz vacía llamada puntos:
const puntos = ;
Estas dos sentencias diferentes crean una nueva matriz que contiene 6 números:
const puntos = ;
Pruébalo tú mismo»
La palabra clave new puede producir algunos resultados inesperados:
const puntos = new Array(40, 100, 1);
Pruébalo tú mismo «
const puntos = new Array(40, 100);
Inténtalo tú mismo «
const puntos = new Array(40);
Inténtalo tú mismo «
Un error común
no es lo mismo que:
const puntos = ;
Pruébalo tú mismo «
const puntos = new Array(40);
Pruébalo tú mismo «
Cómo reconocer un array
Una pregunta común es: ¿Cómo sé si una variable es un array?
El problema es que el operador de JavaScript typeof devuelve «object«:
let type = typeof frutas;
Pruébalo tú mismo «
El operador typeof devuelve objeto porque un array de JavaScript es un objeto.
Solución 1:
Para resolver este problema ECMAScript 5 (JavaScript 2009) definió un nuevo método Array.isArray():
Pruébalo tú mismo»
Solución 2:
El operador instanceofdevuelve verdadero si un objeto es creado por un constructor dado:
fruits instanceof Array;
Pruébalo tú mismo «