Clase 23

ECMA6

Soporte
- Compatibilidad de kangax
Compiladores y transpiladores
Recursos

Constantes (cons):

	const PI = 3.141593

Scoping:

Variables Internas (let):

 	for (let i = 0; i < a.length; i++) {
     let = a[i];
     //...
 	}

 	/* ECMA5
 	for (var i = 0; i < a.length; i++) {
     var = a[i];
     //...
 	}
 	*/

Funciones Internas:

 	{
 	    function nivel1 () { return 1 }
 	    nivel1 ();
 	    {
 	        function nivel2() { return 2 }
 	        nivel2 ();
 	    }
 	}

 	/* ECMA5
 	(function () {
 	    var nivel1 = function () { return 1; }
 	    nivel1();
 	    (function () {
 	        var nivel2 = function () { return 2; };
 	        nivel2();
 	    })();
 	})();
 	*/

Arrow Functions:

No pueden usarse con yield
Siempre son anónimas:

 	impares  = numeros.map(v => v + 1);
 	pares = evens.map(v => ({ even: v, odd: v + 1 }))
 	otrosNumeros  = evens.map((v, i) => v + i)

 	/* ECMA5
 	impares  = numeros.map(function (v) { return v + 1; });
 	pares = evens.map(function (v) { return { even: v, odd: v + 1 }; });
 	otrosNumeros  = numeros.map(function (v, i) { return v + i; });
 	*/

return implicito en declaración inline

 	var odds = [1,2,3,4,5].filter(num => num % 2);
 	console.log(odds); // Array [ 1, 3, 5 ]

this contextual:

 this.nums.forEach((v) => {
     if (v % 5 === 0)
         this.fives.push(v)
 })

 /* ECMA 5
 var self = this;
 this.nums.forEach(function (v) {
     if (v % 5 === 0)
         self.fives.push(v);
 });
 */

Gestión de Parámetros en funciones:

Parametros opcionales:

 	function f (x, y = 7, z = 42) {
 	    return x + y + z
 	}

 	/* ECMA5
 	function f (x, y, z) {
 	    if (y === undefined){
 			y = 7;
 		}
 	    z = z || 42;
 	    return x + y + z;
 	};
 	*/

Parametros adicionales:

 	function f (x, y, ...a) {
 	    return (x + y) * a.length
 	}

 	/* ECMA5
 	function f (x, y) {
 	    var a = Array.prototype.slice.call(arguments, 2);
 	    return (x + y) * a.length;
 	};
 	*/

Las plantillas de cadena de texto:

Concepto:

 	`cadena de texto ${expresión} texto`

Multiples líneas:

 	console.log(`línea 1 de texto
 	línea 2 de texto`);

 	/* ECMA5
 	console.log("línea 1 de texto\nlínea 2 de texto");
 	*/

Expresiones:

 	var customer = { name: "Foo" }
 	var card = { amount: 7, product: "Bar", unitprice: 42 }
 	message = `Hello ${customer.name},
 	want to buy ${card.amount} ${card.product} for
 	a total of ${card.amount * card.unitprice} bucks?`

 	/* ECMA5
 	var customer = { name: "Foo" };
 	var card = { amount: 7, product: "Bar", unitprice: 42 };
 	message = "Hello " + customer.name + ",\n" +
 	"want to buy " + card.amount + " " + card.product + " for\n" +
 	"a total of " + (card.amount * card.unitprice) + " bucks?";
 	*/

Mejoras en Objetos (propiedades y métodos):

Definición de propiedades computerizadas:

 	obj = {
 	    foo: "bar",
 	    [ "prop_" + foo() ]: 42
 	}

 	/* ECMA5
 	obj = {
 	    foo: "bar"
 	};
 	obj[ "prop_" + foo() ] = 42;
 	*/

Métodos:

 	obj = {
 	    foo (a, b) {
 	        …
 	    },
 	    bar (x, y) {
 	        …
 	    },
 	    // Generador
 	    *quux (x, y) {
 	        …
 	    }
 	}

 	/* ECMA5
 	obj = {
 	    foo: function (a, b) {
 	        …
 	    },
 	    bar: function (x, y) {
 	        …
 	    },
 	    //  quux: no equivalent in ES5
 	    …
 	};
 	*/

Parsear Binarios y Octales:

	0b111110111 === 503
	0o767 === 503

	/* ECMA 5
	parseInt("111110111", 2) === 503;
	parseInt("767", 8) === 503;
	*/

Asignación desestructurada:

Arrays:

 	// Matching
 	var list = [ 1, 2, 3 ]
 	var [ a, , b ] = list

 	// Parameter Context Matching
 	function f ([ name, val ]) {
 	    console.log(name, val)
 	}

 	f([ "bar", 42 ]);

 	// Fail-Soft Destructuring
 	var list2 = [ 7, 42 ]
 	var [ a = 1, b = 2, c = 3, d ] = list2

 	/* ECMA5
 	// Matching
 	var list = [ 1, 2, 3 ];
 	var a = list[0], b = list[2];

 	// Parameter Context Matching
 	function f (arg) {
 	    var name = arg[0];
 	    var val  = arg[1];
 	    console.log(name, val);
 	};

 	f([ "bar", 42 ]);

 	// Fail-Soft Destructuring
 	var list2 = [ 7, 42 ];
 	var a = typeof list2[0] || 1;
 	var b = typeof list2[1] || 2;
 	var c = typeof list2[2] !== "undefined" ? list2[2] : 3;
 	var d = typeof list2[3] !== "undefined" ? list2[3] : undefined;
 	*/

Nuevos Métodos Integrados:

Asignación de propiedades enumerables en objetos:

 	var dst  = { quux: 0 }
 	var src1 = { foo: 1, bar: 2 }
 	var src2 = { foo: 3, baz: 4 }
 	Object.assign(dst, src1, src2)

 	// Verificación
 	dst.quux === 0
 	dst.foo  === 3
 	dst.bar  === 2
 	dst.baz  === 4

 	/* ECMA5
 	var dst  = { quux: 0 };
 	var src1 = { foo: 1, bar: 2 };
 	var src2 = { foo: 3, baz: 4 };
 	Object.keys(src1).forEach(function(k) {
 	    dst[k] = src1[k];
 	});
 	Object.keys(src2).forEach(function(e) {
 	    dst[k] = src2[k];
 	});

 	// Verificación
 	dst.quux === 0;
 	dst.foo  === 3;
 	dst.bar  === 2;
 	dst.baz  === 4;
 	*/

Busqueda en sub-cadenas:

 	"hello".startsWith("ello", 1) // true
 	"hello".endsWith("hell", 4)   // true
 	"hello".includes("ell")       // true
 	"hello".includes("ell", 1)    // true
 	"hello".includes("ell", 2)    // false

 	/* ECMA5
 	"hello".indexOf("ello") === 1;    // true
 	"hello".indexOf("hell") === (4 - "hell".length); // true
 	"hello".indexOf("ell") !== -1;    // true
 	"hello".indexOf("ell", 1) !== -1; // true
 	"hello".indexOf("ell", 2) !== -1; // false
 	*/

Chequear No-Numericos e infinitos:

 	Number.isNaN(42) === false
 	Number.isNaN(NaN) === true

 	Number.isFinite(Infinity) === false
 	Number.isFinite(-Infinity) === false
 	Number.isFinite(NaN) === false
 	Number.isFinite(123) === true

 	/* ECMA5
 	var isNaN = function (n) {
 	    return n !== n;
 	};
 	var isFinite = function (v) {
 	    return (typeof v === "number" && !isNaN(v) && v !== Infinity && v !== -Infinity);
 	};
 	isNaN(42) === false;
 	isNaN(NaN) === true;

 	isFinite(Infinity) === false;
 	isFinite(-Infinity) === false;
 	isFinite(NaN) === false;
 	isFinite(123) === true;
 	*/

isSafeInteger():

 	Number.isSafeInteger(42) === true
 	Number.isSafeInteger(9007199254740992) === false

 	/* ECMA5
 	function isSafeInteger (n) {
 	    return (
 	           typeof n === 'number'
 	        && Math.round(n) === n
 	        && -(Math.pow(2, 53) - 1) <= n
 	        && n <= (Math.pow(2, 53) - 1)
 	    );
 	}
 	isSafeInteger(42) === true;
 	isSafeInteger(9007199254740992) === false;
 	*/

Truncar Número Flotante:

 console.log(Math.trunc(42.7)) // 42
 console.log(Math.trunc( 0.1)) // 0
 console.log(Math.trunc(-0.1)) // -0

 /* ECMA5
 function mathTrunc (x) {
     return (x < 0 ? Math.ceil(x) : Math.floor(x));
 }
 console.log(mathTrunc(42.7)) // 42
 console.log(mathTrunc( 0.1)) // 0
 console.log(mathTrunc(-0.1)) // -0
 */

For... of (iteración sobre valores y no propiedades):

  let arr = [3, 5, 7];
  arr.foo = "hello";

  for (let i in arr) {
     console.log(i);
     // "0", "1", "2", "foo"
  }

  for (let i of arr) {
     console.log(i);
     // "3", "5", "7"
  }

Generadores:

Ejemplo de Miguel Sánchez

 	function* greatGenerator(name) {
 	    yield "Hola " + name + "!";
 	    yield "Esta línea saldrá en la segunda ejecución";
 	    yield "Esta otra, en la tercera";
 	    if (name === "Miguel") yield "Esta otra, saldrá en la cuarta solo si te llamas miguel"
 	}
 	var generatorInstance = greatGenerator("paco");
 	console.log(generatorInstance.next().value); // Hola paco!
 	console.log(generatorInstance.next().value); // Esta línea saldrá la segunda ejecución
 	console.log(generatorInstance.next().value); // Esta otra, en la tercera
 	console.log(generatorInstance.next().value); // undefined

Map:

Manejando datos independientes con una estructura clave/valor

 	let miMap = new Map();
 	let miArray = [];

 	miMap.set('cadena', 'Hola!');
 	miMap.set(miArray, [500, "hola", true, false]);

 	console.log(miMap.get(miArray)); // [500, "hola", true, false]
 	console.log(miMap.get('cadena')); // Hola!

 	console.log(miMap.size); // 2

 	miMap.delete('cadena');

 	console.log(miMap.size); // 1

Clases:

La idea es POO sin prototipos
Definición de Clase:

 	class coche{
 	  constructor(marca, modelo, antiguedad, color, tipo) {
 	    this.marca = marca;
 	    this.modelo = modelo;
 	    this.antiguedad = antiguedad;
 	    this.color = color;
 	    this.tipo = tipo;
 	  }
 	  detalles() {
 	    console.log(`Tu coche es un ${this.marca} ${this.modelo} con ${this.antiguedad} años, clase ${this.tipo} y color ${this.color}`);
 	  }
 	}

 	let miCoche = new coche ("Seat", "Panda", 20, "azul", "turismo");
 	miCoche.detalles();

 	/* ECMA 5
 	var coche = function (marca, modelo, antiguedad, color, tipo) {
 	    // Propiedades
 	    this.marca = marca;
 	    this.modelo = modelo;
 	    this.antiguedad = antiguedad;
 	    this.color = color;
 	    this.tipo = tipo;
 	    // Metodos
 	    this.detalles = function(){
 	      console.log("Tu coche es un "+this.marca+" "+this.modelo+" con "+this.antiguedad+" años, clase "+this.tipo+" y color "+this.color);
 	    }
 	};

 	var miCoche = new coche ("Seat", "Panda", 20, "azul", "turismo");
 	miCoche.detalles();
 	*/

Extensión de Clase:

 	class perro {
 	  constructor(nombre) {
 	    this.patas = 4;
 	    this.ojos = 2;
 	    this.nombre = nombre;
 	  }

 	  ladrar() {
 	    console.log(`${this.nombre} esta ladrando!`);
 	  };
 	}

 	class pastorAleman extends perro {
 	  constructor(nombre) {
 	    super('pastorAleman');
 	    this.colorLengua = "negra";
 	    this.colorOjos = "marrón";
 	    this.capacidadTrabajo = true;
 	    this.especialidad = "Pastoreo";
 	  }

 	  informacion() {
 	  	console.log(`Nombre: ${this.nombre}
 	  	Número patas: ${this.patas}
 	  	Número ojos: ${this.ojos}
 	  	Color ojos: ${this.colorOjos}
 	  	Color Lengua: ${this.colorLengua}
 	  	Capacidad de trabajo: ${this.capacidadTrabajo}
 	  	Especialidad: ${this.especialidad}`);
 	  }
 	}

 	let miPerro = new pastorAleman('Golden');
 	miPerro.informacion();
 	miPerro.ladrar();

 	/* ECMA 5
 	var perro  = function (nombre) {
 	    this.patas = 4;
 	    this.ojos = 2;
 	    this.nombre = nombre;
 	    this.ladrar = function(){
 	    	console.log(this.nombre + " esta ladrando!");
 	    }
 	};

 	var pastorAleman = function () {
 	    this.colorLengua = "negra";
 	    this.colorOjos = "marrón";
 	    this.capacidadTrabajo = true;
 	    this.especialidad = "Pastoreo";
 	    this.informacion = function(){
 			console.log("Nombre: "+this.nombre+"\nNúmero patas: "+this.patas+"\nNúmero ojos: "+this.ojos+"\nColor Lengua: "+this.colorLengua+"\nColor ojos: "+this.colorOjos+"\nCapacidad de trabajo: "+this.capacidadTrabajo+"\nEspecialidad: "+this.especialidad);
 	    }
 	};

 	pastorAleman.prototype = new perro("Golden");

 	var miPerro = new pastorAleman();
 	miPerro.informacion();
 	miPerro.ladrar();
 	*/

Métodos Estáticos:

 	class coche{
 	  static info (edad){
 	  	console.info(`Tienes ${edad} años ${ edad >= 18 ? "y puedes conduccir": "y ... ¡Sorpresa! No puedes conduccir."}`);
 	  }
 	  constructor(marca, modelo, antiguedad, color, tipo) {
 	    this.marca = marca;
 	    this.modelo = modelo;
 	    this.antiguedad = antiguedad;
 	    this.color = color;
 	    this.tipo = tipo;
 	  }
 	  detalles() {
 	    console.log(`Tu coche es un ${this.marca} ${this.modelo} con ${this.antiguedad} años, clase ${this.tipo} y color ${this.color}`);
 	  }
 	}

 	coche.info(50);
 	coche.info(8);
 	let miCoche = new coche ("Seat", "Panda", 20, "azul", "turismo");
 	miCoche.detalles();

Módulos (Exportación):

Único

 	// config.js
 	let config = {
 		token: "secreto",
 	}

 	export default config;

Mutiples

 	// config.js
 	let config = {
 		token: "secreto",
 	}

 	let config_details = {
 		detalles: "más datos"
 	}

 	export config;
 	export config_details;

Combinada

 	// config.js
 	let config = {
 		token: "secreto",
 	}

 	let config_details = {
 		detalles: "más datos"
 	}

 	let configuraciones = {config, config_details}

 	export default configuraciones;
 	export config;
 	export config_details;

Módulos (Importación):

Síncrona

 	// único
 	import config from './config.js';

 	// Multiples
 	import * as config from './config.js';

 	// Combinandos
 	import configuraciones from './config.js';
 	import { config, config_details } from './config.js';

Asíncrona (solo un módulo)

 	System.import('modulo')

     .then(modulo => {
         // Uso del módulo importado
     })
     .catch(error => {
         // Gestión de errores
     });

Asíncrona (multiples módulos)

     Promise.all(
         ['module1', 'module2', 'module3']
         .map(x => System.import(x)))
     .then(([module1, module2, module3]) => {
         // Use module1, module2, module3
     });

Ejercicios

1 - Incluye conceptos y mejoras de ES6 en tu proyecto personal.

	// Tu solución

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

clase23.md

clase23.md

Clase 23

ECMA6

Ejercicios

Files

clase23.md

Latest commit

History

clase23.md

File metadata and controls

Clase 23

ECMA6

Ejercicios