Los arrays son una característica ampliamente utilizada de lenguajes de programación; son variables especiales que se pueden utilizar para almacenar varios valores al mismo tiempo. Sin embargo, cuando hablamos de JavaScript, siempre hay más que aprender.
En este artículo, vamos a echar un vistazo a tres importantes características muy poco conocidas de los arrays de JavaScript de las que es posible que no hayas ni escuchado hablar.
1. Agregar propiedades personalizadas a los arrays
Si buscas en Internet la definición de arrays de JavaScript, te darás cuenta de que casi todas las definiciones citan a los arrays como lo que son realmente, objetos.
De hecho, casi todo con lo que tratemos en JavaScript se convertirá en un objeto. Hay dos clases de tipos de datos en JavaScript, primitivos y objetos, pero los primitivos envuelven siempre objetos en el interior.
Los array, las funciones, dates, etc., son objetos predefinidos de JavaScript que se han incorporado en métodos, propiedades y cuentan con su propia sintaxis normalizada.
Los arrays de JavaScript pueden tener tres tipos diferentes de propiedades:
- Los índices de un array
- Las propiedades integradas
- Las propiedades personalizadas que puedes añadir
Las dos primeras son más conocidas, las usarás todos los días, pero la tercera ya no tanto. Vamos a ver, de forma rápida, cómo puedes añadir propiedades personalizadas a un array.
Índices como propiedades
Los arrays de JavaScript usan la sintaxis de los corchetes, como var ary = [ "orange", "apple", "lychee"] ;.
Los índices de los distintos elementos de un array son básicamente propiedades cuyo nombre de propiedad es siempre un número entero no negativo.
Los índices son una característica única del objeto Array, y a diferencia de las otras propiedades integradas, puede configurarse solo con los corchetes, tal que ary[3] = "peach";.
Propiedades integradas
Los arrays también cuentan con propiedades integradas, como array.length. La propiedad length devuelve un valor entero que indica la longitud del array.
En general, las propiedades integradas se encuentran frecuentemente en objetos predefinidos de Javascript, como los arrays. Junto con los métodos integrados, ayudan a personalizar los objetos genéricos para que estos sean aptos para diferentes necesidades.
A las propiedades integradas se accede ya sea con la sintaxis objeto.clave o objeto ["clave"]. Así mismo, puedes escribir ary["length"] para acceder a la longitud de un array.
Crear propiedades personalizadas para un objeto array
Ahora, vamos a hablar de la inserción de tus propias propiedades para arrays. Los arrays son objetos predefinidos que almacenan diferentes tipos de valores en diferentes índices.
Por lo general, no hay necesidad de agregar propiedades personalizadas a un array. Esta es una de las razones principales por las que no se sabe mucho acerca de esta característica. De hecho, si quieres tratar a un array como un objeto normal, mediante la inserción de pares de valores clave al misma, es posible que quieras utilizar un objeto normal para su propósito en vez de un array. Sin embargo, esto no quiere decir que no haya casos especiales donde se puede hacer uso del hecho de que un array es un objeto, mediante la inserción de una o más propiedades personalizadas.
Por ejemplo, puedes agregar una propiedad personalizada a un array que identifique el "tipo" o la "clase" de tus elementos, como se puedes ver en el siguiente ejemplo.
var ary = ["orange","apple","lychee"]; ary.itemClass = "fruits"; console.log(ary + " are " + ary.itemClass); // "orange,apple,lychee are fruits"
Ten en cuenta que las propiedades personalizadas que agregues a un array son numerables, lo que significa que será recogido por los bucles tales como los for...in.
2. Recorrer elementos de un array
Es probable que hayas dicho, "eso ya lo sé", y es más que probable que así sea. Pero también es cierto que decir "recorrer elementos de un array" sea un poco abstracto, ya que lo que en realidad sabrás hacer es recorrer en un bucle los índices de un array.
Dado que los índices de un array único se componen de números enteros no negativos, generalmente iteramos un valor entero a partir de cero y terminando en la longitud del array. A continuación, utilizamos ese valor iterado para acceder al elemento del array a un índice dado.
Sin embargo, desde ECMAScript6, hay una forma de recorrerlos directamente a través de los valores del array sin molestarse con los índices, y puedes darle uso mediante el bucle for...of.
En un array, el bucle for...of recorre los elementos de la matriz en el orden de los índices, en otras palabras, se hará cargo de la iteración en los índices y devolverá un valor del array existente en un determinado índice. Este bucle es ideal si lo que deseas es recorrer todos los elementos del array, y trabajar con ellos.
var ary = ["orange","apple","lychee"];
for (let item of ary){
console.log(item);
}
// "orange", "apple", "lychee"
Comparándolo con el bucle for de siempre, obtendremos los índices en lugar de los valores como salida.
var ary = ["orange","apple","lychee"];
for (var item = 0; item < ary.length; item++){
console.log(item);
}
// 0, 1, 2
3. El número de elementos no es su longitud
Por lo general, cuando hablamos de la longitud de una matriz, pensamos que es el número de elementos con los que cuenta el array, o la longitud que le hemos dado de forma manual. Sin embargo, en realidad, la longitud de un array depende del mayor índice existente dentro de él.
La longitud es una propiedad muy flexible. Tanto si ya has fijado la longitud de un array de antemano o no, si mantienes la inserción de valores del array, su longitud seguirá aumentando en consecuencia.
var ary = []; ary.length = 3; console.log(ary.length); // 3 ary[5] = "abcd"; console.log(ary.length); // 6
En el ejemplo anterior, puedes ver que le he dado a la matriz sólo un valor en el índice 5, y su longitud ahora es 6. Ahora, si piensas que mediante la inserción de un valor en el índice 5, el array creó los índices de 0 a 4 automáticamente, te equivocaste. En realidad no hay índices existentes de 0 a 4 en el array. Esto se puede comprobar mediante el operador in.
var ary = []; ary.length = 3; console.log(ary.length); // 3 ary[5] = "abcd"; console.log(ary.length); // 6 console.log(0 in ary); // false
El array ary es lo que llamamos un array "escaso", un array donde los índices no se crean de forma continua, y tienen lagunas. Lo contrario de un array "escaso" es un array "denso" donde existen índices de forma continua en el array, y el número de elementos son los mismos que la longitud.
La propiedad length también es capaz de truncar una matriz, asegurándote de que el índice más alto presente en la matriz es siempre menor que él, como la longitud siempre es numéricamente mayor que el más alto índice de forma predeterminada.
En el siguiente ejemplo, podemos ver cómo perdemos el elemento en el índice 5 al disminuir la longitud del array ary.
var ary = []; ary.length = 3; console.log(ary.length); // 3 ary[5] = "abcd"; console.log(ary.length); // 6 ary.length = 2; console.log(ary.length); // 2 console.log(ary[5]); // undefined
Fuente: hongkiat.com