Arreglos de JavaScript

Los arrays de JavaScript se utilizan para almacenar múltiples valores en una única variable.

Ejemplo

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

Pruebe usted mismo

¿Qué es un array?

Un array es un tipo especial de variable que puede almacenar más de un valor a la vez.

Si tiene una lista de proyectos (por ejemplo, una lista de marcas de autos), almacenar las marcas de autos en una única variable debería ser así:

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

Pero, ¿qué pasa si desea recorrer todos los autos y encontrar un valor específico? ¿Qué pasa si no son tres marcas de autos, sino trescientas?

La solución es un array!

Un array puede almacenar muchos valores bajo un nombre único y puede acceder a estos valores mediante la referencia del índice.

Crear array

El uso de texto de array es la forma más sencilla de crear un array en JavaScript.

Sintaxis:

var array-name = [item1, item2, ...];

Ejemplo

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

Pruebe usted mismo

Los espacios en blanco y los saltos de línea no son importantes. La declaración puede extenderse a múltiples líneas:

Ejemplo

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

Pruebe usted mismo

No escriba una coma después del último elemento (por ejemplo, "BMW",).

Puede haber problemas de compatibilidad entre navegadores.

usando la palabra clave JavaScript new

El siguiente ejemplo también creará un array y le asignará valores:

Ejemplo

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

Pruebe usted mismo

Los dos ejemplos anteriores tienen el mismo efecto. No es necesario usar new Array().

Por simplicidad, legibilidad y velocidad de ejecución, por favor use el primer método (método de texto de array).

por referencia

Accedemos a los elementos del arrayNúmero de índice (subíndice)para referirse a un elemento de array.

Esta instrucción accede al valor del primer elemento en cars:

var name = cars[0];

Esta instrucción modifica el primer elemento en cars:

cars[0] = "Opel";

Ejemplo

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

Pruebe usted mismo

[0] es el primer elemento del array. [1] es el segundo. Los índices de array comienzan en 0.

Cambiar elemento de array

Esta instrucción modifica el valor del primer elemento en cars:

cars[0] = "Opel";

Ejemplo

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

Pruebe usted mismo

Acceder al array completo

A través de JavaScript, se puede acceder al array completo mediante el nombre del array:

Ejemplo

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

Pruebe usted mismo

El array es un objeto

Un array es un tipo especial de objeto. En JavaScript, se utiliza typeof El operador devuelve "object".

Sin embargo, es mejor describir el array de JavaScript como un array.

El uso del arraynúmerospara acceder a sus "elementos" en este ejemplo.person[0] Devuelve Bill:

Array:

var person = ["Bill", "Gates", 62];

Pruebe usted mismo

El uso del objetoNombrepara acceder a sus "miembros" en este ejemplo.person.firstName Devuelve Bill:

Objeto:

var person = {firstName:"Bill", lastName:"Gates", age:19};

Pruebe usted mismo

Los elementos del array pueden ser objetos

Las variables de JavaScript pueden ser objetos. Los arrays son un tipo especial de objeto.

Por lo tanto, puedes guardar variables de diferentes tipos en el mismo array.

Puedes guardar objetos en un array. Puedes guardar funciones en un array. Incluso puedes guardar otro array en un array:

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

Propiedades y métodos del array

La verdadera fuerza de los arrays de JavaScript se oculta en las propiedades y métodos del array:

Ejemplo

var x = cars.length;   // La propiedad length devuelve el número de elementos
var y = cars.sort();   // El método sort() ordena el array

Vamos a aprender los métodos del array en el próximo capítulo.

Propiedad length

length La propiedad length devuelve la longitud del array (número de elementos del array).

Ejemplo

var fruits = ["Banana", "Naranja", "Manzana", "Mango"];
fruits.length;                       // La longitud de fruits es 4

Pruebe usted mismo

length La propiedad siempre es mayor que el índice más alto del array (subíndice).

Acceder al primer elemento del array

Ejemplo

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

Pruebe usted mismo

Acceder al último elemento del array

Ejemplo

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

Pruebe usted mismo

Recorrer los elementos del array

El método más seguro para recorrer un array es usar "for"Ciclo:",

Ejemplo

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
} 

Pruebe usted mismo

También puede usar Array.foreach() Función:

Ejemplo

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Pruebe usted mismo

Añadir elementos al array

El mejor método para añadir elementos a un array es usar push() Método:

Ejemplo

var fruits = ["Banana", "Naranja", "Manzana", "Mango"];
fruits.push("Lemon");                // Añadir un nuevo elemento (Lemon) a fruits

Pruebe usted mismo

También se puede usar length Añadir nuevos elementos al array:

Ejemplo

var fruits = ["Banana", "Naranja", "Manzana", "Mango"];
fruits[fruits.length] = "Lemon";     // Añadir un nuevo elemento (Lemon) a fruits

Pruebe usted mismo

¡Advertencia!

Añadir el elemento con el índice más alto puede crear "huecos" no definidos en el array:

Ejemplo

var fruits = ["Banana", "Naranja", "Manzana", "Mango"];
fruits[6] = "Lemon";                 // Añadir un nuevo elemento (Lemon) a fruits

Pruebe usted mismo

Arrays asociativos

Muchos elementos de programación admiten arrays con índices nombrados.

Los arreglos con índices nombrados se denominan arrays asociativos (o hash).

JavaScript No se admitearreglos con índices nombrados.

En JavaScript, los arreglos solo pueden usaríndices numéricos.

Ejemplo

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length devuelve 3
var y = person[0];              // person[0] devuelve "Bill"

Pruebe usted mismo

¡Advertencia!

Si utiliza índices nombrados, JavaScript redefinirá el array como un objeto estándar.

Después de esto, todos los métodos y propiedades de los arreglos generarán resultados incorrectos.

Ejemplo:

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length devolverá 0
var y = person[0];              // person[0] devolverá undefined

Pruebe usted mismo

La diferencia entre array y objeto

en JavaScript,ArrayUsaíndices numéricos.

en JavaScript,objetoUsaÍndices nombrados.

Los arrays son un tipo especial de objeto que tienen índices numéricos.

¿Cuándo usar array y cuándo usar objeto?

  • JavaScript no admite arrays asociativos
  • Si deseas que los elementos se llamencadena (texto)entonces debe usarobjeto.
  • Si deseas que los elementos se llamennúmerosentonces debe usarArray.

Evita new Array()

No es necesario usar el constructor de array integrado de JavaScript new Array().

Usa [] ¡En su lugar!

Las siguientes dos declaraciones diferentes crean un nuevo array vacío llamado points:

var points = new Array();         // malo
var points = [];                  // bueno

Las siguientes dos declaraciones diferentes crean un nuevo array con seis números:

var points = new Array(40, 100, 1, 5, 25, 10); // malo
var points = [40, 100, 1, 5, 25, 10];          // bueno

Pruebe usted mismo

new Las palabras clave solo complican el código. También pueden producir resultados inesperados:

var points = new Array(40, 100);  // crea un array con dos elementos (40 y 100)

¿Qué sucedería si eliminas uno de los elementos?

var points = new Array(40);       // crea un array con 40 elementos undefined!

Pruebe usted mismo

¿Cómo identificar un array

Un problema común es: ¿cómo puedo saber si una variable es un array?

El problema radica en el operador de JavaScript typeof devuelve "object":

var fruits = ["Banana", "Naranja", "Manzana", "Mango"];
typeof fruits;             // devuelve object

Pruebe usted mismo

El operador typeof devuelve "object", porque los arreglos de JavaScript son objetos.

Solución 1:

Para resolver este problema, ECMAScript 5 definió un nuevo método Array.isArray():

Array.isArray(fruits);     // Devuelve true

Pruebe usted mismo

El problema con esta solución es ECMAScript 5 No es compatible con navegadores antiguos.

Solución 2:

Cree su propia isArray() La función resuelve este problema:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

Pruebe usted mismo

Si el argumento es un array, la función siempre devuelve true.

O una explicación más precisa sería: si el prototipo del objeto contiene la palabra "Array", entonces devuelve true.

Solución 3:

Si el objeto se crea con el constructor dado, entonces instanceof Operador que devuelve true:

var fruits = ["Banana", "Naranja", "Manzana", "Mango"];
fruits instanceof Array     // Devuelve true

Pruebe usted mismo