Apresentando o EcmaScript 6

1,525 views
1,446 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,525
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
16
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Apresentando o EcmaScript 6

  1. 1. Globalcode – Open4education EcmaScript 6 Giovanni Bassi giovanni@lambda3.com.br @giovannibassi Victor Cavalcante victor@cavalcante.net @vcavalcante
  2. 2. Globalcode – Open4education Agenda Por que? Novidades Valores padrão para parâmetros let e const Declaração concisa de função Funções “flecha”  Operador “spread” Array comprehension Quando? Classes! o/ Módulos Destructuring Generators Promises
  3. 3. Porque?
  4. 4. Globalcode – Open4education Novidades
  5. 5. Globalcode – Open4education Valores padrão para parâmetros // ES 5 function inc(x, y) { y = y || 1; return x + y; } // ES 6 function inc(x, y = 1) { return x += y; }
  6. 6. Globalcode – Open4education let // ES 6 function doSomething() { let N = 5; if (someCondition) { let N = 10; doSomethingElse(N); } console.log(N); // 5 }
  7. 7. Globalcode – Open4education const const limit = 100; limit = 200; // SyntaxError
  8. 8. Globalcode – Open4education Declaração concisa de função var Person = { name: 'Joe', hello() { console.log('Ola ', this.name); } };
  9. 9. Globalcode – Open4education Funções “flecha” => // ES 5 [1,2,3].map(function (x) { return x * x; }); // ES 6 [1,2,3].map(x => x * x); let indefinido = () => {}; let um = () => 1; Cuidado com o this!
  10. 10. Globalcode – Open4education Operador “spread” // ES 5 var max = Math.max.apply(null, [14, 3]); // ES 6 var max = Math.max(...[14, 3]);
  11. 11. Globalcode – Open4education Operador “spread” function guarde(name, ...itens) { itens.forEach(function (item) { cofre[name].push(item) }); } guarde('João', 'cartas', 'dinheiro');
  12. 12. Globalcode – Open4education Array comprehension // ES 5 let quadrados = [1, 2].map(function (i) { return i * I }); // ES 6 quadrados = [for (i of [1, 2]) i * i];
  13. 13. Globalcode – Open4education Array comprehension (com filtro) // ES 5 let arrayComUm =[1,5].filter(function(i){ return i < 3; }); // ES 6 arrayComUm = [for (i of [1,5]) if (i < 3) i];
  14. 14. Globalcode – Open4education Array comprehension (aninhado) let posicoesXadrez = [for (x of 'abcdefgh'.split('')) for (y of '12345678'.split('')) (x+y)];
  15. 15. Globalcode – Open4education Classes o/ class Vehicle { constructor(color) { this.color = color; this.speed = 0; } drive() { this.speed = 40; } }
  16. 16. Globalcode – Open4education Classes (herança) class Car extends Vehicle { constructor(brand, color) { super(color); this.brand = brand; this.wheels = 4; } }
  17. 17. Globalcode – Open4education Módulos //mathlib.js const HALF = 0.5; export function sqrt(x) { return Math.exp(HALF * Math.log(x)); } //outroArquivo.js import { sqrt } from 'mathlib'; console.log(sqrt(16));
  18. 18. Globalcode – Open4education Destructuring (arrays) var [a,b,c] = [1,2,3]; console.log(a, b, c); // 1 2 3 let nums = () => [1,2,3]; let [,,tres] = nums() console.log(tres); // 3 function foo([um, dois], tres) { console.log(um, dois, tres); } foo([1, 2], 3); // 1 2 3
  19. 19. Globalcode – Open4education Destructuring (objetos) var { foo, bar } = { foo: "lorem", bar: "ipsum" }; // foo: "lorem", bar: "ipsum" var { foo:f, bar:b } = { foo: "lorem", bar: "ipsum" }; // f: "lorem", b: "ipsum" try {} catch ({type, message, filename, lineNumber}) {}
  20. 20. Globalcode – Open4education Generators function* foo() { yield 'foo'; yield 'bar'; yield 'baz'; } var x = foo(); console.log(x.next().value); // 'foo' console.log(x.next().value); // 'bar' console.log(x.next().value); // 'baz'
  21. 21. Globalcode – Open4education Generators (além) body = yield db.find('something');
  22. 22. Globalcode – Open4education Promises nativas! (Criando) var promise = new Promise((resolve, reject) => { if (/* tudo ok */) { resolve("Funfou!"); } else { reject(new Error("quebrou")); } });
  23. 23. Globalcode – Open4education Promises (consumindo) promise.then(function(result) { console.log(result); //Funfou!" }, function(err) { console.log(err); // Error: "quebrou" });
  24. 24. Globalcode – Open4education Quando? Hoje (incompleto): Node 0.11 Chrome Canary Firefox Nightly Transpilers diversos Versão final Era esperado no fim desse ano, mas... ... tudo indica que fica pronto no primeiro semestre do ano que vem ... só então devemos ver suporte no Node (uso imediato), e nos navegadores (mais lento – depende de adoção)
  25. 25. Globalcode – Open4education Obrigado! Giovanni Bassi giovanni@lambda3.com.br @giovannibassi Victor Cavalcante victor@cavalcante.net @vcavalcante

×