Arrays Javascript

Los Arrays Javascript son usados para almacenar múltiples valores en una sola variable.

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Arrays Javascript</h2>	

<p id="demo"></p>

<script>
var cars = ["saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>

Que es un Array

Un Array es una variable especial, la cual puede tener más de un valor al mismo tiempo. Si tienes una lista de items (una lista de marcas de coches, por ejm), puedes almacenar dicha lista en variables distintas.

Ejm

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

Sin embargo, ¿qué pasa si deseas recorrer los vehículos y encontrar uno específico? ¿Y si no tuvieras 3 coches, sino 300?

¡La solución es una matriz o Array!

Una matriz (Array) puede contener muchos valores con un solo nombre y puedes acceder a los valores haciendo referencia a un número de índice.

Crear un Array

El uso de un literal de matriz es la forma más sencilla de crear una matriz en JavaScript.

Ejm

var array_name = [item1item2, ...];

Los espacios y los saltos de línea no son importantes. Una declaración puede abarcar varias líneas.

Ejm

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

Usando la palabra clave Javascript New

El siguiente ejm también crea un Array, y asigna valores al mismo.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
var cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Los dos ejemplos anteriores hacen exactamente lo mismo. No es necesario utilizar new Array().
Por simplicidad, legibilidad y velocidad de ejecución, usa el primero (el método literal de matriz).

Accediendo a los elementos de un Array

Puedes acceder a un elemento de la matriz consultando el número de índice. Esta declaración accede al valor del primer elemento en los automóviles.

Ejm

var name = cars[0];

Ejm 

<!DOCTYPE html>
<html>
<body>
<h2>Arrays Javascript</h2>	

<p id="demo"></p>

<script>
var cars = ["Volvo", "BMW", "Mercedes"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>

Cambiando un elemento del Array

La siguiente declaración cambia el primer elemento de un Array.

Ejm

cars[0] = "Opel";

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Arrays Javascript</h2>	

<p id="demo"></p>

<script>
var cars = ["Opel", "Volvo", "Citroen"];
cars[0] = "Saab";
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>

Accede a la matriz completa

Con JavaScript, se puedes acceder a la matriz completa consultando el nombre de la matriz.

Ejm

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

Los Arrays son objetos

Las matrices son un tipo especial de objetos. El operador typeof en JavaScript devuelve “objeto” para matrices.

Pero, las matrices de JavaScript se describen mejor como matrices.

Las matrices usan números para acceder a sus “elementos”. En este ejemplo,  person [0] devuelve John.

Ejm

var person = ["John""Doe"46];

Los objetos usan nombres para acceder a sus “miembros”. En este ejemplo, person.firstName devuelve John.

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Arrays Javascript</h2>

<p id="demo"></p>

<script>
var person = {firstname: "John", lastname: "Doe", age: "46"};
document.getElementById("demo").innerHTML = person["firstname"];
</script>
</body>
</html>

Los elementos Array pueden ser objetos

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. Puede tener matrices en una matriz.

Ejm

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

Propiedades y métodos Array

La verdadera fuerza de las matrices de JavaScript son las propiedades y métodos de matriz incorporados.

Ejm

var x = cars.length;   // The length property returns the number of elements
var y = cars.sort();   // The sort() method sorts arrays

La propiedad length

La propiedad length de una matriz devuelve la longitud de una matriz (el número de elementos de la matriz).

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Propiedades Javascript para Arrays</h2>	

<p id="demo"></p>

<script>
var fruits = ["Naranja", "Platano", "Sandía", "Melón"];
document.getElementById("demo").innerHTML = fruits.length;
</script>
</body>
</html>

La propiedad length es siempre una más que el índice de matriz más alto.

Acceder al primer elemento del Array

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];
document.getElementById("demo").innerHTML = first;
</script>

</body>
</html>

Acceder al último elemento del Array

Veamos una manera de acceder al último elemento de un Array.

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Arrays Javascript</h2>
<p>Acceder al último elemento del Array cars</p>
<p id="demo"></p>

<script>
var cars = ["Volvo", "Mazda", "Citroen", "Renault"];
var last = cars[cars.length-1];
document.getElementById("demo").innerHTML = last;
</script>
</body>
</html>

Elementos de matriz en bucle

La forma más segura de recorrer una matriz es usando un bucle for.

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Arrays Javascript</h2>
<p>La mejor forma de acceder a un Array es mediante un bucle for</p>

<p id="demo"></p>

<script>
var fruit, text, flen, i;
fruit = ["Platano", "Manzana", "Pera", "Membrillo"];
flen = fruit.length;
text = "<ul>";
for(i = 0; i < flen; i++)
{
text += "<li>" + fruit[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

También puedes utilizar la función Array.forEach().

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Arrays Javascript, funcion forEach()</h2>
<p>Con la función forEach() también podemos recorrer un Array, dicha función no es soportada en Internet Explorer 8 o más antiguos</p>

<p id="demo"></p>

<script>
var fruit, text;
fruit = ["Platano", "Mango", "Ciruela"];
text = "<ul>";
fruit.forEach(myFunction);
text += "</ul>";

document.getElementById("demo").innerHTML = text;

function myFunction(value)
{
text += "<li>" + value + "</li>";
}
</script>
</body>
</html>

Añadiendo elementos Array

La mejor manera de añadir un nuevo elemento a un Array es usando el método push().

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Arrays Javascript</h2>
<p>El método push() incluye un nuevo elemento en un Array</p>

<button onClick="myFunction()">Haz clic</button>

<p id="demo"></p>

<script>
var fruits = ["banana", "pera", "manzana", "melón"];
document.getElementById("demo").innerHTML = fruits;

function myFunction()
{
fruits.push("limón");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Arrays asociativos

Muchos lenguajes de programación admiten matrices con índices con nombre. Las matrices con índices con nombre se denominan matrices asociativas (o hashes). JavaScript no admite matrices con índices con nombre. En JavaScript, las matrices siempre usan índices numerados.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

OJO: Si usas índices con nombre, JavaScript redefinirá la matriz a un objeto estándar. Después de eso, algunos métodos y propiedades de matriz producirán resultados incorrectos.

La diferencia entre Arrays y Objetos

En JavaScript, las matrices usan índices numerados. En JavaScript, los objetos utilizan índices con nombre. Las matrices son un tipo especial de objetos, con índices numerados.

Cuando usar Arrays y cuando usar Objetos

  • javaScript no admite matrices asociativas.
  • Debes utilizar objetos cuando deseas que los nombres de elementos sean cadenas (texto).
  • Debes usar matrices cuando desees que los nombres de los elementos sean números.

Evitar la palabra reservada new en los Arrays

No es necesario utilizar el constructor de matrices incorporado en JavaScript new Array(). Mejor usar []. Estas dos declaraciones diferentes crean una nueva matriz vacía denominada points.

Ejm

var points = new Array();     // Bad
var points = [];              // Good 

Estas dos declaraciones diferentes crean una nueva matriz que contiene 6 números.

Ejm

var points = new Array(40100152510); // Bad
var points = [40100152510];          // Good

La palabra clave new solo complica el código. También puede producir algunos resultados inesperados.

Como reconocer un Array

Una pregunta común es: ¿Cómo sé si una variable es una matriz?. El problema es que el operador de JavaScript typeof devuelve “objeto”.

Ejm

var fruits = ["Banana""Orange""Apple""Mango"];
typeof fruits;    // returns object

El operador typeof devuelve un objeto porque una matriz de JavaScript es un objeto.

Solución 1

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

Ejm

Array.isArray(fruits);   // returns true

El problema con esta solución es que ECMAScript 5 no es compatible con navegadores más antiguos.

Solución 2

Para resolver este problema, puedes crear tu propia función isArray():

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>This "home made" isArray() function returns true when used on an array:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>

</body>
</html>

La función anterior siempre devuelve verdadero si el argumento es una matriz. O más precisamente: devuelve verdadero si el prototipo del objeto contiene la palabra “Array”.

Solución 3

El operador instanceof devuelve verdadero si un objeto es creado por un constructor dado:

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>The instanceof operator returns true when used on an array:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits instanceof Array;
</script>

</body>
</html>