matrices de JavaScript se utilizan para almacenar varios valores en una sola variable.
Viendo matrices
En este tutorial vamos a utilizar una secuencia de comandos para mostrar las matrices dentro de un <p> elemento con id="demo" :
Ejemplo
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
La primera línea (en el guión) crea una matriz denominada coches.
La segunda línea "encuentra" el elemento con id="demo" y "displays" la matriz en el "innerHTML" de ella .;
Inténtalo tú mismo
Crear una matriz, y asignar valores a la misma:
Los espacios y saltos de línea no son importantes. Una declaración puede abarcar varias líneas:
Nunca ponga una coma después del último elemento (como "BMW" ,).
El efecto no es coherente en todos los navegadores.
¿Qué es una matriz?
Una matriz es una variable especial, que puede contener más de un valor a la vez.
Si usted tiene una lista de elementos (una lista de nombres de coche, por ejemplo), el almacenamiento de los coches en las variables individuales podría tener este aspecto:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
Sin embargo, lo que si desea colocar a través de los coches y encontrar una específica? ¿Y si no tenías 3 coches, pero 300?
La solución es una matriz!
Una matriz puede contener muchos valores bajo un único nombre, y se puede acceder a los valores de referencia a un número de índice.
Creación de una matriz
El uso de un literal de matriz es la forma más fácil de crear una matriz de JavaScript.
Sintaxis:
var array-name = [ item1 , item2 , ...];
Ejemplo:
var cars = ["Saab", "Volvo", "BMW"];Usando el nuevo JavaScript Palabra clave
El siguiente ejemplo también crea una matriz, y asigna valores a la misma:
Los dos ejemplos anteriores hacen exactamente lo mismo. No hay necesidad de utilizar new Array() .
Por simplicidad, legibilidad y la velocidad de ejecución, utilice el primero de ellos (el método literal de Array).
Acceder a los elementos de una matriz
Usted se refiere a un elemento de matriz haciendo referencia alnúmero de índice.
Esta declaración accede al valor del primer elemento de coches:
var
name = cars[0];
Esta declaración modifica el primer elemento de coches:
cars[0] = "Opel";
[0] es el primer elemento de una matriz. [1] es el segundo. los índices de matriz empiezan con 0 puntos.
Usted puede tener diferentes objetos en una matriz
las variables JavaScript pueden ser objetos. Las matrices son tipos especiales de objetos.
Debido a esto, puede tener variables de diferentes tipos en la misma matriz.
Puede tener objetos en una matriz. Puede tener funciones en una matriz. Usted puede tener matrices en una matriz:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Las matrices son objetos
Las matrices son un tipo especial de objetos. El typeof operador en JavaScript devuelve "object" para las matrices.
Sin embargo, las matrices de JavaScript se describen mejor como matrices.
Las matrices utilizan numbers para acceder a sus "elements" . En este ejemplo, person[0] devuelve John :
Objetos utilizan nombres para acceder a sus "miembros". En este ejemplo, person.firstName devuelve John :
Propiedades de la matriz y Métodos
La verdadera fuerza de matrices de JavaScript son los incorporados en las propiedades y métodos de la matriz:
Ejemplos
var x = cars.length;
// The length property returns the number of elements in cars
var y = cars.sort();
// The sort() method sort cars in alphabetical order
métodos de arreglos están cubiertos en el siguiente capítulo.
La longitud de la propiedad
La length la propiedad de una matriz devuelve la longitud de una matriz (el número de elementos de la matriz).
Ejemplo
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // the length of fruits is 4
Inténtalo tú mismo " La propiedad de longitud es siempre uno más que el más alto índice de matriz.
La adición de elementos de matriz
La forma más fácil de añadir un nuevo elemento a un conjunto está utilizando el método push:
Ejemplo
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // adds a new element (Lemon) to fruits Inténtalo tú mismo " Nuevo elemento también se puede añadir a una matriz mediante la length la propiedad:
Ejemplo
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits Inténtalo tú mismo " ADVERTENCIA !
Elementos con altos índices pueden crear indefinidos adición de "holes" en una matriz:
Ejemplo
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon"; // adds a new element (Lemon) to fruits Inténtalo tú mismo " Looping elementos de matriz
La mejor forma de bucle a través de una matriz, es el uso de un "for" bucle:
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>";
}
Inténtalo tú mismo " Las matrices asociativas
Muchos lenguajes de programación soportan matrices con índices nombrados.
Matrices con índices nombrados se llaman matrices asociativas (o hash).
JavaScript no es compatible con matrices de índices con nombre.
En JavaScript, matrices siempre utilizan índices numeradas.
Ejemplo
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;
// person.length will return 3
var y = person[0];
// person[0] will return "John" Inténtalo tú mismo " ADVERTENCIA !!
Si se utiliza un índice llamado, JavaScript va a redefinir la matriz a un objeto estándar.
Después de eso, todos los métodos y propiedades de la matriz producirán resultados incorrectos.
Ejemplo:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length will
return 0
var y = person[0];
// person[0] will return undefined Inténtalo tú mismo " La diferencia entre matrices y los objetos
En JavaScript, matrices usan índices numeradas.
En JavaScript, objetos utilizan índices nombrados.
Las matrices son una clase especial de objetos, con índices numeradas.
Cuándo utilizar matrices. Cuándo utilizar objetos.
- JavaScript no es compatible con matrices asociativas.
- Debe utilizar los objetos cuando se desea que los nombres de los elementos a ser cadenas (de texto).
- Debe utilizar matrices cuando se desea que los nombres de los elementos a ser números.
Evitar new Array()
No hay necesidad de utilizar array constructor incorporado en el JavaScript new Array() .
Utilice [] en su lugar.
Estos dos estados diferentes tanto crear una nueva matriz vacía puntos con nombre:
var points = new Array();
// Bad
var points = [];
// Good
Estos dos estados diferentes tanto para crear una nueva matriz que contiene 6 números:
var points = new Array(40, 100, 1, 5, 25, 10) // Bad
var points = [40, 100, 1, 5, 25, 10];
// Good
Inténtalo tú mismo " La new palabra clave sólo complica el código. También puede producir algunos resultados inesperados:
var points = new Array(40, 100); // Creates an array with two elements (40 and 100)¿Qué pasa si elimino uno de los elementos?
var points = new Array(40); // Creates an array with 40 undefined elements !!!!! Inténtalo tú mismo " Cómo reconocer una matriz
Una pregunta común es: ¿Cómo puedo saber si una variable es una matriz?
El problema es que el operador JavaScript typeof devuelve "objeto":
var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits; // returns object Inténtalo tú mismo " Los rendimientos de operador typeof oponen porque una matriz de JavaScript es un objeto.
Solución 1:
Para resolver este problema ECMAScript 5 define un nuevo método Array.isArray() :
Array.isArray(fruits); // returns true Inténtalo tú mismo " El problema de esta solución es que ECMAScript 5 no es compatible con navegadores antiguos.
Solución 2:
Para resolver este problema, puede crear su propia isArray() función:
function isArray(x) {
return
x.constructor.toString().indexOf("Array") > -1;
} Inténtalo tú mismo " La función anterior siempre devuelve verdadero si el argumento es una matriz.
O más precisamente: devuelve verdadero si el prototipo de objeto contiene la palabra "matriz".
Solución 3:
El instanceof devuelve true si un objeto es creado por un constructor determinado:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array // returns true Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »