Arreglos de JavaScript
- Página anterior Atributos numéricos JS
- Página siguiente Métodos de Array JS
Los arrays de JavaScript se utilizan para almacenar múltiples valores en una única variable.
¿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"];
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" ];
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");
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];
[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];
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;
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];
El uso del objetoNombrepara acceder a sus "miembros" en este ejemplo.person.firstName
Devuelve Bill:
Objeto:
var person = {firstName:"Bill", lastName:"Gates", age:19};
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
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];
Acceder al último elemento del array
Ejemplo
fruits = ["Banana", "Orange", "Apple", "Mango"]; var last = fruits[fruits.length - 1];
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>"; }
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>"; }
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
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
¡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
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"
¡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
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
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!
¿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
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
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; }
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
- Página anterior Atributos numéricos JS
- Página siguiente Métodos de Array JS