JavaScript ES6 – ECMAScript 6 (2015) [Guia Rápida]

JavaScript 6, ECMAScript 6, ES6 ó ECMAScript 2015.
JavaScript que nació en 1995 en Nestcape y con esta actualización se convierte en un lenguaje mayor de edad con mucha dignidad.

Constantes

Se añade una forma de crear constantes

const ANCHO_MAXIMO = 200;

Variables con ámbito (scope) de bloque

Con let podemos crear variables que solo pertenecen dentro del ámbito donde se crean.

for (let i = 0; i <= 20; i++){
    console.log(i); // Muestra el número
}

console.log(i); // Falla porque i ya no existe

Interpolación de variables en textos con «

Lo más fácil es verlo con un ejemplo. Ojo, son las comillas que parecen tildes.

let nombre = 'Paco';
let saludo = 'querido';

let texto = `Hola ${saludo} ${nombre}:`;

// El resultado es: "Hola querido Paco:"

Mapas

Es un objeto que nos permite gestionar diccionarios, es muy similar a un objeto, pero con las siguientes diferencias:

Las claves de un Object son Strings y Symbols, mientras que para un Map pueden ser de cualquier tipo, incluyendo funciones, objetos y cualquier otro tipo primitivo.
Puedes saber fácilmente el tamaño de un Map usando la propiedad size, mientras que le número de propiedades en un Object tiene que ser deternminado manualmente.
Un Map es un iterable lo que permite iterar directamente sobre el, mientras que si queremos iterar sobre un Object necesitamos obtener primero las claves de alguna forma para después iterar sobre el.
Un Object tiene prototipo, por lo que hay claves por defecto en tu mapa que pueden colisionar con tus claves si no eres cuidadoso. En el estandard ES5 esto se puede evitar usando mapa = Object.create(null), pero esto raramente se hace.

var miMapa = new Map(); 
var claveObj = {},     
    claveFunc = function () {},     
    claveCadena = "una cadena"; 

// Asignando valores 
miMapa.set(claveCadena, "valor asociado con 'una cadena'"); miMapa.set(claveObj, "valor asociado con claveObj"); miMapa.set(claveFunc, "valor asociado with claveFunc"); 

miMapa.size; // 3 

// Obteniendo los valores 
miMapa.get(claveCadena);    // "valor asociado con 'una cadena'" miMapa.get(claveObj);       // "valor asociado con claveObj" miMapa.get(claveFunc);      // "valor asociado con claveFunc" miMapa.get("una cadena");   // ""valor asociado con 'una cadena'"                                   
                            // porque claveCadena === 'una cadena' miMapa.get({});           // undefined, porque claveObj !== {} miMapa.get(function() {}) // undefined, porque 
                          // claveFunc !== function () {}

// Para saber si existe el elemento
miMapa.has("una cadena"); // Devuelve true

// Para eliminar un elemento
miMapa.delete("una cadena"); // Devuelve true porque pudo eliminarlo

// Para saber el tamaño
miMapa.size();  // Devuelve 2 porque eliminamos 1

Ver mas ejemplos en https://medium.com/@xadrijo/explorando-la-funci%C3%B3n-map-en-javascript-c04c42773fb6

Conjuntos o Sets

Es casi lo mismo que un array, pero con algunos métodos implícitos nuevos y con una mejora considerable de rendimiento al operar de forma masiva sobre el mismo. Tiene mas o menos los mismos métodos que el map.

let engineering = new Set(['Alberta', 'Dr. Gero', 'Trunks',
     'Bulma', 'Gohan']);
engineering.add('Gohan');

console.log(engineering); 
// Resultado: { 'Alberta', 'Dr. Gero', 'Trunks', 'Bulma', 'Gohan' }

Unión,

let engineering = new Set(['Alberta', 'Dr. Gero', 
     'Trunks', 'Bulma', 'Gohan']);
let freelancers = new Set(['Piccolo','Trunks', 'Vegeta', 
     'Goku', 'Gohan']);
let union = new Set([...engineering, ...freelancers]);
console.log(union);
// Imprime: {'Alberta', 'Dr. Gero', 'Trunks', 'Bulma', 'Gohan', 
// 'Piccolo', 'Vegeta', 'Goku' }.
// Eliminando los duplicados.

El operador … convierte el conjunto en un array y después los combina eliminando los duplicados.

Ver más ejemplos útiles en https://code.tutsplus.com/es/tutorials/understanding-sets-with-javascript–cms-29789

Función flecha o Arrow

Ejemplo 1:

// ES5
// Imaginemos una variable data que incluye un array de objectos
var data = [{...}, {...}, {...}, ...];
data.forEach(function(elem){
	// Tratamos el elemento
    console.log(elem)
});

//ES6
var data = [{...}, {...}, {...}, ...];
data.forEach(elem => {
	console.log(elem);
});

Ejemplo 2:

// ES5
var miFuncion = function(num) {
	return num + num;
}

// ES6
var miFuncion = (num) => num + num;

Asiganción por desestructuracíon

Este palabrejo nos simplifica un poco el código al hacer asignaciones de variables entre arrays y objetos.

Nos permite hacer esto:

var foo = ["uno", "dos", "tres"];

// sin desestructuración
var uno  = foo[0];
var dos  = foo[1];
var tres = foo[2]; // asignación en tres lineas

// con desestructuración
var [uno, dos, tres] = foo; // asignación en una sola linea

// o esto
let telefono = {
    marca: "Huawei",
    color: "Blanco",
    pantalla: "6"
};

let { marca, pantalla} = telefono;
console.log(marca, pantalla); // Imprime: "Huawei", "6"

// y tambien pueden tener valores por defecto, 
// por si no encuentra el item
let { marca, pantalla, so = "android"} = telefono;
console.log(marca, pantalla, so); // Imprime: "Huawei", "6", "android"

// tambien se puede utilizar en los param de un function
function miMovil({ marca, so = "android"}) {
    console.log(so);
}
miMovil(telefono); // Imprime: "Huawei", "android"

// o esto otro

let [a, b] = [1, 5];
console.log(a, b); // Imprime: 1, 5

y esto

function f() {
  return [1, 2];
}
var a, b;
[a, b] = f();
console.log("A es " + a + " B es " + b);

y esto

const { name, value } = e.target;

For of y forEach

Se implementa un nuevo modo de hacer iteraciones más eficiente y legible.

let frutas = ["manzana", "pera", "limón"];

for (let fruta of frutas){
    console.log(fruta);
}
// Esto imprimirá una línea por cada fruta.

// forEach solo es valido para arrays. 
// Para objetos objetos utilizar for..of
frutas.forEach(fruta => {
    console.log(fruta);
});
// Esto tambien imprimirá una línea por cada fruta.

Funciones Generadoras

Una explicación mas detallada la puedes ver en http://juanmirod.github.io/2017/09/11/Generadores-JavaScript.html

function* counterGenerator() {   
    let i = 0;   
    while (true) {     
        yield i;     
        i++;   
    } 
} 

var counter = counterGenerator();
counter.next() // { value: 0, done: false } 
counter.next() // { value: 1, done: false } 
counter.next() // { value: 2, done: false } 
// ... hasta el infinito y más allá!

Otro ejemplo

function* range (limit) {
  let c = 0
  while ( c < limit ) {
    yield c
    c++
  }
}

let lista = [...range(5)]
// [ 0, 1, 2, 3, 4 ]

Parámetros por defecto

function comprar(producto, cantidad = 1){
    console.log(producto, cantidad);
}
comprar("Peras"); // "Peras", 1

Parámetros agrupados o rest

Convierte los parámetros en un arreglo con el operador «…».

function comprar(...producto){
    console.log(productos);
}
comprar("Peras", "Limones", "Sandía"); 
// Imprime un arreglo: ["Peras", "Limones", "Sandía"]

Parámetros distribuidos o spread

function comprar(producto, cantidad, tipo){
    console.log(producto, cantidad, tipo);
}

let = parametros = ["Sandía", 3, "Alimentación"];
// Con los ... asigna los elementos a los parámetros de entrada.
comprar(...parametros); 
// Imprime un arreglo: "Sandía", 3, "Alimentación"

Función Flecha o Arrow

/* Antes esta función se escribia así:
function suma (num1, num2){
    return (num1 + num2);
}
*/

// Ahora se puede escribir así

let suma = (nnum1, num2) => num1 + num2;

No puede crearse con new.

No pueden pasarse objeto de argumentos.

No se puede utilizar la sintaxis de «…» en los parametros.

No tienen prototipos.

Clases y herencia

Por fin hay algo parecido a una clase.

class Vehiculo{
    constructor(numRuedas){
        this.numRuedas = numRuedas;
    }
    avanza (velocidad){
        console.log(`Avanzo a ${velocidad} Km/hora`);
        this.velocidad = velocidad;
    }
}

let coche = new Vehiculo(4);
let moto = new Vehiculo(2);
moto.avanza(50);
console.log(moto); // {numRuedas: 2, velodidad: 50} 
console.log(moto.numRuedas); // 2

class Moto extends Vehiculo{
     contructor(){
         // super llama al contructor del objeto del que hereda
         super(2); // Le pasa que tiene 2 ruedas
     }
}

let moto2 = new Moto();
moto2.avanza(80); 
console.log(moto2.velocidad) // 80

Metodos Estáticos de Clase

class Operaciones {
   static suma(a, b){
       return a + b;
   }
  
   resta (a, b){
      return a - b;
   }
}

console.log(Operaciones.suma(10, 5)); // 15
console.log(Operaciones.resta(10, 5));  // Da error!!!

Getter y Setter

class Vehiculo{
    get nombre(){
         return this._nombre
    }

    set nombre (nombre){
        this._nombre = nombre;
    }
}

var miCoche = new Vehiculo

Módulos, import y export

Importación de la clase por defecto:

// Fichero Rama.js

// Fichero Coche.js

class Coche {
   arrancar(){
   }
}
export default Rama

// Fichero Trafico.js
import Coche from "./Coche.js";

let coche = new Coche();
coche.arrancar();

otra forma

// Fichero Coche.js

export default class Coche {
   arrancar(){
   }
}

// Fichero Trafico.js
import Coche from "./Coche.js";

let coche = new Coche();
coche.arrancar();

Importación de miembros de la clase:

// Fichero Coche.js
export class Motor{
}

class Coche {
   arrancar(){
      let motor = new Motor;
      motor.arranca();
   }
}
export default Rama

// Fichero Trafico.js
// Los miembros de clase se important entre {}
import Coche, { Motor} from "./Coche.js";

let motor = new Motor();
motor.arrancar();