arrays en javaScript

(Casi) todo lo que quiso saber sobre los arrays en js y no se atrevió a preguntar

Paul Wunderlich

archivado en: JavaScript / 9 mayo, 2015 / taller:

Como es sabido, javaScript tiene dos tipos de datos: los tipos primitivos (string, number, booleanos, null y undefined) y los tipos objeto, que incluyen entre otros a las funciones, lo que entendemos por objetos y los arrays.

Un array, matriz o arreglo en español, es un conjunto o colección de elementos ordenados que puede tener una o más dimensiones.

/* array de una dimensión */

[1, 2, 3, 4]

/* array de dos dimensiones */

[

[1, 3, 5, 9],

[4, 8, 10, 2],

[7, 8, 2, 3]

]

1. Crear arrays

En javaScript los arrays se pueden declarar de dos maneras. Una, más antigua, es sacando una instancia del objeto Array.

/* Los valores son opcionales  */

var miArray = new Array(1, 2, 3);

Pero es mejor usar la segunda, que es asignando directamente un par de corchetes.

var miArray = [];

var otroArray = [1, 2, 3];

Para acceder a un elemento de un array basta con indicar su posición, algo sencillo si no nos olvidamos que la cuenta empieza por 0, no por 1.

var miArray = [1, 2, 3];

console.log(miArray[1]); // 2

Para seleccionar un elemento de un array multidimensional, es decir, un array de arrays, el sistema es el mismo:

var miArray = [

[2, 3, 4],

[1, 5, 7]

];

miArray[1][1]; // 5

2. Copias en profundidad

En los valores primitivos, a cada copia se le asigna su propio espacio en memoria; pero los que son del tipo objeto apuntan al mismo sitio. Por lo tanto, lo que hagamos en la copia afecta al original. En código:

var miArray = [1, 2, 3];

var otroArray = miArray;

otroArray[1] = "0";

console.log(miArray[1]); // 0

Por lo tanto, para poder sacar una copia de verdad de un array tenemos que hacer un apaño o, como dicen los expertos, una copia en profundidad. La forma más sencilla y rápida de hacerlo es utilizando el método slice(), que veremos en detalle un poco más adelante.

var miArray = [1, 2, 3];

var otroArray = miArray.slice();

otroArray[1] = "0"

console.log(miArray[1]); // 2

Bueno, pues más o menos, espero que todo esté claro hasta aquí, vamos ahora con los principales métodos del objeto Array en ecma5. Me dejo los de ecma6 para otra entrada que estoy preparando sobre las novedades de la nueva versión.

3. Propiedades y recorridos

Quitando prototype, de la que no viene al caso hablar ahora, los arrays solo tienen una propiedad: length, que indica su longitud.

var miArray = [1, 2, 3];

console.log(miArray.length); // 3

Esto nos permite recorrerlos de forma muy sencilla en un bucle for.

var miArray = [1, 2, 3];

for ( var i=0, len=miArray.length; i<len; i++ ) {

console.log(miArray[i]);

}

Si existe algún riesgo de que el array nos llegue null o undefined conviene mirar primero si es un array con el método isArray() antes de tratar de acceder a su propiedad length, pues de lo contrario nos daría un error. Dicho de otra forma, esto no casca:

miArray = undefined;

if ( Array.isArray(miArray) ) {

for ( var i=0, len=miArray.length; i<len; i++ ) {

console.log(miArray[i]);

}

}

Otra manera de recorrer arrays en con el método forEach, que recibe una función callback con tres parámetros: el índice, el ítem y el propio array. Mola para trabajar con jasonakos.

var miArray = [{"foo":1}, {"foo":2}, {"foo":3}];

miArray.forEach(function(element, index, miArray) {

element.foo += 5;

});

4. Métodos para manipular arrays

El objeto array de javaScript cuenta con una montonera de métodos muy útiles y en ecma script 6 se han añadido todavía más, aunque de estos últimos hablaré en otra entrada específica.

Empezamos con los métodos relacionados con la adición y sustracción de elementos. Con pop() se elimina y devuelve un elemento del final del array y con shift(), del principio.

var miArray = [1, 4, 6, 8, 2, 3];

console.log( miArray.pop() ); // 3

console.log( miArray.shift() ); // 1

Para eliminar uno o más elementos a partir de una posición contamos con el método splice(), que se utiliza un montón. En el primer parámetro se indica la posición a partir de la cual se deben eliminar ítems (recordemos que la cuenta empieza en 0) y en el segundo el número a eliminar.

var miArray = [1, 4, 6, 8, 2, 3];

miArray.splice(2, 3);

/* miArray [1, 4, 3] */

Pero splice() también sirve para añadir elementos si los indicamos a partir del tercer parámetro inclusive y se añaden a partir de la posición indicada en el primer parámetro. Por ejemplo:

var miArray = [1, 4, 6, 8, 2, 3];

miArray.splice(2, 3, 99, 77, 88);

/* miArray [1, 4, 99, 77, 88, 3] */

Por último, mencionar los métodos push(), que añade uno o más elementos al final del array, y unshift(), que lo hace al principio.

5. Métodos para ordenar arrays

sort() es uno de los métodos más útiles, aunque resulta algo complicado de entender cómo funciona. Si no indicamos nada, ordena los elementos de un array alfabéticamente, incluidos los números, que son tratados como si fueran cadenas.

var miArray = ["foo", "bar", "bazinga"];

miArray = miArray.sort();

/* [ 'bar', 'bazinga', 'foo' ] */

miArray = [1, 6, 2, 11];

miArray = miArray.sort();

/* [ 1, 11, 2, 6 ] */

Además, si solo necesitamos darle la vuelta, podemos usar reverse().

var miArray = [2, 4, 6];

miArray.reverse();

// [6, 4, 2]

6. Métodos para mapear y crear arrays derivados

Existen muchos métodos que nos permiten sacar una copia transformada de un array, esto es, que a partir de un array crean otro idéntico o con variantes.

Uno ya lo conocemos y es slice(), que devuelve un array con los elementos comprendidos entre los dos parámetros que admite. Con el primero indicamos el principio y con el segundo el final y ambos cuentan a partir del principio. Si no pasamos ninguno, como vimos, nos devuelve todos.

var miArray = [1, 4, 6, 8, 2, 3];

var otroArray = miArray.slice(1, 3);

/* otroArray [4, 6] */

Otro método muy utilizado es concat(), que como indica su nombre permite concatenar arrays.

var miArray = [1, 4, 6];

var otroArray = [2, 1];

var arrayConcatenado = miArray.concat(otroArray);

/* arrayConcatenado [1, 4, 6, 2, 1] */

Filter() es otro método muy útil. Sirve para obtener un array resultado de haber filtrado otro con algún requerimiento.

var miArray = [2, 4, 6, 8, 10];

miArray = miArray.filter(function(element) {

return element > 4;

});

// [6, 8, 10]

Si no tenemos que filtrar valores, sin embargo, sino obtener una copia modificada, es más elegante usar map(), que viene de perlas cuando estamos trabajando con jasonakos.

var miArray = [2, 4, 6];

var miArrayMapeado = [];

miArrayMapeado = miArray.map(function(element) {

return element * 2;

});

// [4, 8, 12]

Como vemos, todos estos métodos de son muy similares y podemos dudar cuándo conviene usar uno u otro. En general, lo más eficiente con diferencia es utilizar un for. Por ejemplo, entre este for y este filter:

miArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

miArrayFiltrado = [];

...

for (var i = 0, len = miArray.length; i < len; i++) {

if (miArray[i] > 5) {

miArrayFiltrado.push(miArray[i]);

}

}

...

miArrayFiltrado = miArray.filter(function(element) {

if (element > 5) {

return element;

}

});

El for es muchísimo más rápido...

forvsfilter

Por lo tanto, la razón para decantarse por un método u otro es sobre todo estética o, mejor dicho, por claridad del código. Queda más compacto y luego es más fácil saber que en determinado momento se está filtrando, mapeando, reduciendo, etcétera, un array de un vistazo sin necesidad de analizar qué se está haciendo dentro del bucle for.

7. Otros

Por último, mencionar una serie de métodos que aportan otras utilidades. El primero el isArray() que vimos antes y que nos devuelve true o false para indicar si el argumento es un array.

Otro método muy utilizado es indexOf(), que devuelve el número de la posición en la que se encuentra la primera coincidencia que le pasamos por parámetro. Si no la encuentra, devuelve -1, lo que se usa con frecuencia para hacer cosas de este tipo:

var miArray = ["foo", "bar", "bazinga"];

if ( miArray.indexOf("bar") != -1 ) {

/* Hacemos algo si hay un bar */

}

Si lo que necesitamos es encontrar la última posición de la coincidencia, entonces podemos usar lastIndexOf().

Con join() se puede armar una cadena con los elementos del array concatenados. De forma opcional, podemos incluir un separador.

var miArray = ["foo", "bar", "bazinga"];

var cadena = miArray.join("-");

/* cadena foo-bar-bazinga */

Si no necesitamos el separador, basta con usar el método toString(), que es muy similar y devuelve los elementos en una cadena concatenados por comas.

Otro método chulo es reduce(), con el que podemos obtener el valor resultante de aplicar determinada operación a una iteración de los valores de un array.

var miArray = [2, 4, 6];

miArray = miArray.reduce(function(valorAnterior, valorActual, index, array) {

return valorAnterior + valorActual;

});

// 12

Y termino con un método poco usado, pero que sin embargo es interesante es every(), que devuelve true o false si en el array hay algún ítem que cumple la condición que se define en la función callback.

var miArray = [1, 4, 6];

var check = miArray.every(function(element, index, miArray) {

return element > 4;

});

// check = true

 

Bueno, me dejo algún método, pero más o menos esos son los principales... urf, urf, toxopost!

|| Tags: ,

valoración de los lectores sobre arrays en javaScript

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (4 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.