Llega el momento de comprobar las novedades que aporta ECMAScript 2015 (informalmente ES6) a los Arrays de Javascript.

Métodos de objeto array

Array.prototype.findIndex

var position = myArray.findIndex(x => x_condition)

ECMAScript 2015 incorpora el método findIndex a los arrays, mediante el cual nos devuelve el índice del array donde se encuentra el primer elemento que cumple la condición que le hemos indicado.

La función findIndex es parecida a indexOf, con un par de diferencias:

• Le pasamos como argumento una arrow function. Es la condición que tiene que cumplir el elemento del array que queremos detectar.
• Permite detectar NaN

Veamos un par de ejemplos:

const arr = ['a', NaN];
console.log(arr.findIndex(x => Number.isNaN(x))); // 1

[3, 1, -1, -5].findIndex(x => x < 0);//2 

Array.prototype.find

var element = myArray.find(x => x_condition)

El método find es muy similar al método findIndex, pero en este caso, lo que nos devuelve es directamente el valor del elemento que cumple la condición que hemos definido.

Tomando como referencia el ejemplo de código anterior, vemos que:

const arr = ['a', NaN];
console.log(arr.find(x => Number.isNaN(x))); //NaN

[3, 1, -1, -5].find(x => x < 0);//-1 

Array.prototype.fill

const myArray = new Array(size).fill(value, start?, end?);

Con el método fill, por fin tenemos una forma elegante de crear un Array de un tamaño determinado e inicializar su contenido. Veamos unos ejemplos:

const array = new Array(3).fill('a'); //['a', 'a', 'a']
['a', 'b', 'c', 'd'].fill(null, 2, 3); //['a', 'b', null, 'd']

Array.prototype.copyWithin

myArray.copyWithin(target, start, end = this.length)

El método copyWithin copia los elementos comprendidos entre los indices [start,end) a partir de la posición target.

Veamos:

const arr = [0,1,"x","y",4,5,6];
arr.copyWithin(3, 2, 4);
console.log(arr);
//[0, 1, "x", "x", "y", 5, 6]

Iterando sobre arrays

Igual que los Maps y los Sets, los Arrays disponen de los métodos keys(), values(), y entries() que nos facilitan su uso como objetos iterables.

Vamos a ver algunos ejemplos de como usarlos:

let array = ['x', 'y', 'z'];


for(let key of array.keys()){
  console.log(key);
}
//0
//1
//2

for(let [key, val] of array.entries()){
  console.log(val, key);
}
//"x" 0
//"y" 1
//"z" 2


var values = array.values();
while(true){
  let item = values.next();
  if(item.done)
    break;
  console.log(item.value);
}
//"x"
//"y"
//"z"

Abreviación de Array.prototype

De forma similar a como sucede con Object, ES6 nos permite acceder al prototype de Array a través de un Array vacío literal, es decir, []. Vamos a verlos:

//ES5
Array.prototype.slice.call(arguments)

//ES6
[].slice.call(arguments)

Métodos estáticos

Array.from

Array.from(arrayLike[, mapFn[, thisArg]])

Array.from permite convertir los 2 siguientes tipos de valores en arrays:

• valores array-like (tienen logintud y elementos indexados)
• valores iterables

Entendamos mejor el primer caso. ¿Por qué nos podría servir convertir pseudoarrays a objetos Array de verdad?

const arrayLike = { length: 2, 0: 'x', 1: 'y' };

// no podemos usar for-of, por que no es un iterable
for (const item of arrayLike) { 
    console.log(item);
}// TypeError

const array = Array.from(arrayLike);
//ahora sí podemos, array es iterable
for (const item of array) {
    console.log(item);
}
// a
// b

De la segunda opción, objetos iterables, vemos que podemos crear Arrays a partir de Maps, Sets, strings, iterables obtenidos a partir de array.keys(), etc.

Veamos algunos ejemplos de Array.from con iterables:

Array.from(['a', 'b', 'c']);
//['a', 'b', 'c']

Array.from(['a', 'b', 'c'].keys());
//[0, 1, 2]

Array.from("foo");                      
// ["f", "o", "o"]

var set = new Set(["foo", "bar", 1]);
Array.from(set);   
// ["foo", "bar", 1]

var map = new Map([['bar', 1], ['foo', 2]]);
Array.from(map);
//[["bar", 1], ["foo", 2]]  

Array.from es además una forma genérica de utilizar la función map().

Veamos como usarlo de forma equivalente a map():

//ES5
var mappedArray = Array.prototype.map.call([1, 2, 3], x => x*x);
// [1, 4, 9]

//ES6
var mappedArray = Array.from([1, 2, 3], x => x*x);      
// [1, 4, 9]

Array.of

Array.of(...items)

El método Array.of crea un array con los elementos que se le pasan como argumento. Veamos como funciona:

let array = Array.of(1,3,5);
//[1,3,5]

Agujeros en Arrays

Los agujeros en arrays (holes) son elementos que no existen dentro de un array. Por ejemplo:

const arr = ['a',,'b']
'use strict'
0 in arr; //true
1 in arr; //false
2 in arr; //true
arr[1]; //undefined

Algunos métodos de Array que se definieron en ES5 ignoran los agujeros en arrays, mientras que otros los eliminan, y otros los consideran elementos undefined.

Los métodos que añade ES6 (los que hemos estado viendo en este artículo), tratan siempre los agujeros de array como elementos undefined.

Los métodos que incorpora ES6 tratan los array holes como si fueran elementos undefined.

…Y estas son la novedades que aporta ES6 a la clase Array. ¿Te parecen potentes? ¿A cual le vas a sacar más partido?