Nuevas características de JavaScript Arrays con ES2015

En este artículo, discutiremos las nuevas incorporaciones en ES2015 que mejoran sustancialmente la forma en que trabajamos con Arrays en JavaScript.

1. Destrucción de arrays

La desestructuración de arrays nos permite asignar valores a las variables de una array utilizando una sintaxis similar a la propia array. Veamos el siguiente código donde tenemos una serie de animales. Necesitamos asignar las variables a, b y c a los primeros tres elementos de la array.

let animals =['Dog','Cat','Rat'];
  
let a = animals[0];
let b = animals[1];
let c = animals[2];
  
console.log(a,b,c);

Ahora, aquí necesitábamos 3 declaraciones solo para asignar 3 variables a, b y c. Si tuviéramos como 10 variables, necesitaríamos 10 declaraciones de este tipo. Este enfoque definitivamente no se escala de manera eficiente. Para atender este problema, ES2015 introdujo el concepto de desestructuración de arreglos. Entonces, en lugar de asignar cada variable en una nueva línea, asignamos todas las variables locales en una sola línea de código entre corchetes. Por ejemplo:

let animals =['Dog','Cat','Rat'];
  
let a,b,c;
  
[a,b,c] = animals;
  
console.log(a,b,c);

En el ejemplo anterior, JavaScript hace coincidir el número de variables de la izquierda con el número de elementos de la array de la derecha. Este enfoque es fácil de entender, requiere mucho menos código y es muy escalable. La sintaxis para esto es

[ variable1, variable2, ..., variableN ] = array;

Podemos reducir aún más el número de líneas declarando las variables en el momento de la asignación.

let animals =['Dog','Cat','Rat'];
  
let [a,b,c] = animals;
  
console.log(a,b,c);

o

let animals =['Dog','Cat','Rat'];
  
let a,b,c;
  
[a, ,b] = animals;
  
console.log(a,b);

Entonces, en el ejemplo anterior, no queríamos acceder al segundo elemento de la array, así que dejamos su marcador de posición en la array en blanco y aun así obtuvimos los valores correctos en las variables a y b, es decir, a = ‘Perro’ y b = ‘Rata’. Se descartó ‘Gato’.

Ahora, la próxima vez que necesite intercambiar dos variables, digamos a y b, haga lo siguiente y terminará en una sola línea.

[a, b] = [b, a];

2. Bucle for-of:

ES2015 introdujo un nuevo ciclo para iterar sobre los elementos de la array. En primer lugar, veamos el enfoque actual que seguimos cuando necesitamos acceder (imprimir en nuestro ejemplo) a todos los elementos de una array. Actualmente utilizamos cualquiera de los siguientes tres enfoques.

1)

for(let i = 0; i < animals.length; i++){
   console.log(animals[i]);
}

2)

for(let index in animals){
   console.log(animals[index]);
}

3)

animals.forEach(function(animal){
   console.log(animal);
});

El problema con el ^primer y segundo ^enfoque es que necesitamos actualizar iterativamente el valor del índice y luego usar ese valor del índice para acceder al elemento en la array. Este es un esfuerzo extra inútil. El enfoque 3 ^rd < está libre de este problema, pero tiene otro problema. ¿Qué pasa si no queremos ejecutar la función sobre todos los elementos de la array? ¿Qué pasa si queremos salir del bucle con alguna condición? No podemos hacer eso en el enfoque 3.

Entonces, con el uso del bucle ‘for-of’, podemos acceder directamente al elemento dentro del bucle como se muestra en el siguiente ejemplo

for(let animal of animals){
   console.log(animal);
}

No necesitamos ningún esfuerzo adicional para asignar la variable de índice cada vez. Ahora podemos acceder directamente al elemento individual de la array.

3. Array.prototype.find()

Con ES2015, JavaScript introdujo una nueva función de orden superior para usar en arrays de JavaScript. Esta función es Array.prototype.find(). Esta función devuelve el elemento que cumple una condición dada. Toma como argumento una función de devolución de llamada que devuelve un valor booleano (verdadero o falso). La función de devolución de llamada se ejecuta en cada elemento de la array hasta que la devolución de llamada devuelve verdadero para un elemento o cuando la función de devolución de llamada se ha ejecutado para todos los elementos de la array.

let animals  = ['Dog', 'Cat', 'Rat'];
  
let animal = animals.find(function(animal){
    if(animal === 'Rat'){
         return true;
    }
});
  
console.log(animal);  //Rat