Nuevos Métodos de Array en ES6

facebook-svg gplus-svg twitter-svg

En ES6 los Arrays cuentan con algunos nuevos métodos. Para explicar estos métodos voy a utilizar funciones de flecha

1. Métodos estáticos de Array

Los métodos estáticos son aquellos métodos que van asociados a la clase y no al objeto. En este caso están asociados al Array ( la clase ) y no a las instancias del Array. Si esto no es muy claro, lo será inmediatamente.

1.1 Array.from()

El método Array.from() crea un nuevo array a partir de un elemento iterable, o sea: arrays, cadenas de texto, objetos, listas de nodos DOM ( NodeList ),  el objeto arguments de una función y otros dos tipos de estructuras nuevas en ES6: maps y sets.

Dado el siguiente HTML podemos crear en javascript una lista de nodos DOM utilizando el método querySelectorAll - por ejemplo


<nav class="w3">
    <ul>
      <li><a href="/index.php">INDEX</a></li>
      <li><a href="/canvas/chuleta.php">CANVAS</a></li>
      <li><a href="/svg/introduccion.php">SVG</a></li>
      <li><a href="/css3/chuletacss3.php">CSS</a></li>
      <li><a href="/jsblog/requestanimationframe.php">JS</a></li>
    </ul>  
</nav>
const listaDeNodos = document.querySelectorAll(".w3 a");

Una lista de nodos es un elemento iterable, tiene la propiedad length, pero no tiene los métodos de un array com por ejemplo map() o forEach().
En ES6 podemos crear un array a partir de esta lista de nodos, utilizando Array.from().

const arrayDeNodos = Array.from(listaDeNodos);

Ahora podemos utilizar métodos específicos de los arrays:
A continuación para cada elemento ( forEach ) del array arrayDeNodos, al hacer "click" en uno de estos elementos, primero llamo el método preventDefault(), que no deja al enlace comportarse como un enlace. Ulteriormente puedo recuperar el valor del atributo href.

arrayDeNodos.forEach(a => {
    a.addEventListener("click", e => {
      e.preventDefault();
      console.log(a.getAttribute("href"));
    });
  });

El método Array.from puede utilizar una función que indica ( map ) como construir el nuevo array. En el siguiente ejemplo para crear el nuevo array utilizo solo el texto ( textContent ) de cada enlace.

const arrayDeNodos1 = Array.from(listaDeNodos, a => a.textContent);
console.log(arrayDeNodos1);

Observación: Array.from() ignora los "agujeros" en arrays ( [ 0, ,2 ] ), y los considera undefined:

1.1 Array.of()

El método Array.of() crea un nuevo array de un numero variable de argumentos, como por ejemplo:

console.log(Array.of(3, 11, 8)); // devuelve [3, 11, 8]

En el siguiente ejemplo el método Array.of crea un nuevo array a partir del objeto arguments de una función:

function arrayDeArguments() {
    console.log(Array.of(...arguments));
}
arrayDeArguments(1, 3, 43, 65, 765);

Los tres puntos destacados arriba en rojo representan el operador ...spread , un operador que permite expandir elementos iterables.

2. Métodos de los arrays

2.1. El método find()

El método find() devuelve el valor del primer elemento del array que cumple la condición. Si no lo encuentra devuelve undefined.
En el siguiente ejemplo el método find busca el primer elemento x que es más grande o igual que 10. Si no encuentra ningún elemento que cumpla la condición devuelve undefined.

const numeros = [1, 5, 10, 15, 20];
console.log( numeros.find( x => x >= 10 )); //  devuelve 10
console.log( numeros.find( x => x < 0));    // devuelve undefined
2.2 El método findIndex()

El método findIndex() devuelve el index del primer elemento del array que cumple la condición. Si no lo encuentra devuelve -1.

console.log([6, -5, 8].findIndex(x => x < 0)); //  devuelve  1
console.log([6,  5, 8].findIndex(x => x < 0));  //  devuelve -1

A diferencia del método indexOf, el método findIndex() no tiene problemas en encontrar NaN:

console.log([1, NaN,2].indexOf( NaN )); // devuelve -1 o sea: no lo ha encontrado
console.log([1, NaN,2].findIndex((e) => isNaN(e) ? true : false)); // devuelve 1, o sea e segundo elemento del array

De hecho podemos abreviar todavía más la última línea de código:

console.log([1,NaN,2].findIndex((e) => isNaN(e))); // devuelve 1

Ahora podemos utilizar el index de NaN para eleminarlo del array utilizando splice():

let Ry = [1,NaN,2];
Ry.splice(Ry.findIndex((e) => isNaN(e)),1);
console.log(Ry);

Vea estos ejemplos en codepen:

See the Pen ES6 nuevos metodos de Array by Gabi (@enxaneta) on CodePen.