¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Aprende ES6 - Adiciones a las matrices

Como ya sabrás, en Función 13 estamos embarcados en que aprendas todos los entresijos de ES6. En artículos anteriores hemos hablado sobre let, const y los ámbitos, las funciones flecha, que son realmente útiles, las Promesas y las Clases, cómo podemos usar la Desestructuración o sobre parámetros y propagación. Además hemos aprendido qué nuevas opciones tienen los objetos literales. Si esto no te suena de nada y estás intentando ponerle algún sentido a las siglas, ¡no te preocupes! Echa un vistazo a nuestra Introducción a ES6.

Hace nada hemos visto las nuevas adiciones que los objetos literales reciben en ES6. Las matrices (o Array) no iban a ser menos, ¿no?

Quiero advertir que hay más métodos de los aquí explicados pero que, personalmente, no veo casos de usos útiles o son métodos demasiado complejos como Array.prototype.copyWithin.

Sin más dilación, vamos a ver qué nos traen.

Métodos estáticos

Array.from

Este método es sin duda uno de los que más en falta se echaban. Es habitual querer convertir arguments a una matriz. Hasta ahora, lo hemos estado haciendo así:

var argumentos = [].slice.call(arguments)  

Array.from nos permite simplificar esto siendo más claros:

let argumentos = Array.from(arguments);  

Este método puede convertir dos tipos de objetos a una matriz:

  • Objetos que parecen matrices, los cuales tienen la propiedad .length y cuentan con elementos indexados. Los dos ejemplos más habituales son arguments y el resultado de métodos como document.getElementsByClassName().
  • Objetos iterables como las nuevas estructuras de datos de ES6 como son los Mapas y Set (conjuntos).

Además, permite otro argumento para procesar la lista recibida. Veamos un rápido ejemplo:

function obtenerIds() {  
  return Array.from(arguments, obj => obj.id);
}

let ids = obtenerIds({ id: 1 }, { id: 2 });

console.log(ids); // [1, 2]  

Array.of

Este método básicamente sirve para convertir una lista de argumentos a una matriz.

let numeros = Array.of(1, 2, 3);

console.log(numeros); // [1, 2, 3]  

Métodos de instancia

Array.prototype.fill

Es un método útil para rellenar todos los huecos de una matriz con el valor facilitado:

['a', 'b', 'c', 'd', 'e'].fill(0);
// [0, 0, 0, 0, 0]
new Array(5).fill(0);  
// [0, 0, 0, 0, 0]

Este método también permite recibir dos parámetros más adicionales para indicar desde dónde se empieza a rellenar y hasta dónde.

['a', 'b', 'c', 'd', 'e'].fill(0, 3);
// ['a', 'b', 'c', 0, 0]
new Array(5).fill(0, 0, 3);  
// [0, 0, 0, undefined, undefined]

Array.prototype.find

Este es uno de esos métodos que JavaScript siempre ha necesitado. El método .find devuelve el primer elemento que cumpla con la condición que se establezca en el callback. En caso de no encontrar ninguno, devuelve undefined.

Veamos algunos ejemplos:

[1, 2, 0, -1, -2].find(numero => numero < 0);
// -1 

[1, 2, 0, -1, -2].find(numero => numero > 5);
// undefined

[
    { edad: 14 },
    { edad: 15 },
    { edad: 20 }
].find(persona => persona.edad > 18);
// { edad: 20 }

Array.prototype.findIndex

Este método es muy similar a find solo que en vez de devolver el elemento en cuestión, devuelve el índice en que éste se encuentra. En vez de undefined, devolverá -1 si no se encuentra (similar a indexOf).

[1, 2, 0, -1, -2].findIndex(numero => numero < 0);
// 3 
[1, 2, 0, -1, -2].findIndex(numero => numero > 5);
// -1
[
    { edad: 14 },
    { edad: 15 },
    { edad: 20 }
].findIndex(persona => persona.edad > 18);
// 2

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!