ECMAScript 6 - part 2

maps, sets, iterators, array comprehension, rest parameters, spread operator

Transcript

1. ecmascript 6 ~ part deux ~ www.sayan.ee Sunday, 12 May, 13
2. es6 goals Sunday, 12 May, 13
3. es6 generators complex apps libraries goals Sunday, 12 May, 13
4. es6 modules block scoping iterators spread operator maps destructuring rest params sets default params array comprehension classes Sunday, 12 May, 13
5. modules block scoping iterators spread operator maps destructuring rest params sets default params array comprehension classes google traceur part 1 part 2 Sunday, 12 May, 13
6. iterators spread operator maps rest params sets array comprehension part 2 Sunday, 12 May, 13
7. iterators spread operator maps rest params sets array comprehension part 2 common browser engines? world’s 1st website? Sunday, 12 May, 13
8. sets es6 a set has unique values! Sunday, 12 May, 13
9. var engines = new Set(); sets es6 a set has unique values! new Sunday, 12 May, 13
10. var engines = new Set(); sets es6 a set has unique values! new add engines.add("Gecko"); engines.add("Hippo"); engines.add("Hippo"); Sunday, 12 May, 13
11. var engines = new Set(); sets es6 a set has unique values! new add has engines.add("Gecko"); engines.add("Hippo"); engines.add("Hippo"); console.log( engines.has("Gecko") ); // ?? console.log( engines.has("Indigo") ); // ?? console.log( engines.has("Hippo") ); // ?? Sunday, 12 May, 13
12. var engines = new Set(); sets es6 a set has unique values! new add has delete engines.add("Gecko"); engines.add("Hippo"); engines.add("Hippo"); console.log( engines.has("Gecko") ); // ?? console.log( engines.has("Indigo") ); // ?? console.log( engines.has("Hippo") ); // ?? engines.delete("Hippo"); console.log( engines.has("Hippo") ); // ?? Sunday, 12 May, 13
13. maps es6 keys can be any data type Sunday, 12 May, 13
14. var es6 = new Map(); maps es6 new keys can be any data type Sunday, 12 May, 13
15. var es6 = new Map(); maps es6 new set keys can be any data type es6.set("edition", 6); // key is string es6.set(262, "standard"); // key is number es6.set(undefined, "nah"); // key is undefined var hello = function() { console.log("hello"); }; es6.set(hello, "Hello ES6!"); // key is function Sunday, 12 May, 13
16. var es6 = new Map(); maps es6 new set has keys can be any data type es6.set("edition", 6); // key is string es6.set(262, "standard"); // key is number es6.set(undefined, "nah"); // key is undefined var hello = function() { console.log("hello"); }; es6.set(hello, "Hello ES6!"); // key is function console.log( es6.has("edition") ); // ?? console.log( es6.has("years") ); // ?? console.log( es6.has(undefined) ); // ?? Sunday, 12 May, 13
17. var es6 = new Map(); maps es6 new set has delete keys can be any data type es6.set("edition", 6); // key is string es6.set(262, "standard"); // key is number es6.set(undefined, "nah"); // key is undefined var hello = function() { console.log("hello"); }; es6.set(hello, "Hello ES6!"); // key is function console.log( es6.has("edition") ); // ?? console.log( es6.has("years") ); // ?? console.log( es6.has(undefined) ); // ?? es6.delete(undefined); console.log( es6.has(undefined) ); // ?? Sunday, 12 May, 13
18. var es6 = new Map(); maps es6 new set has delete get keys can be any data type es6.set("edition", 6); // key is string es6.set(262, "standard"); // key is number es6.set(undefined, "nah"); // key is undefined var hello = function() { console.log("hello"); }; es6.set(hello, "Hello ES6!"); // key is function console.log( es6.has("edition") ); // ?? console.log( es6.has("years") ); // ?? console.log( es6.has(undefined) ); // ?? es6.delete(undefined); console.log( es6.has(undefined) ); // ?? console.log( es6.get(hello) ); // Hello ES6! Sunday, 12 May, 13
19. iterator for-of es6 get the values, not keys es5 Sunday, 12 May, 13
20. iterator for-of es6 get the values, not keys es5 var planets = ["Mercury", "Venus", "Earth", "Mars"]; for (p in planets) { console.log(p); // ?? } for in Sunday, 12 May, 13
21. iterator for-of es6 get the values, not keys es5 var planets = ["Mercury", "Venus", "Earth", "Mars"]; for (p in planets) { console.log(p); // ?? } for in var planets = ["Mercury", "Venus", "Earth", "Mars"]; for (p of planets) { console.log(p); // ?? } for of Sunday, 12 May, 13
22. iterator for-of es6 get the values, not keys es5 var planets = ["Mercury", "Venus", "Earth", "Mars"]; for (p in planets) { console.log(p); // ?? } for in var planets = ["Mercury", "Venus", "Earth", "Mars"]; for (p of planets) { console.log(p); // ?? } for of var engines = Set(["Gecko", "Trident", "Webkit", "Webkit"]); for (var e of engines) { console.log(e); // ?? } for of Sunday, 12 May, 13
23. array comprehension shorthand Sunday, 12 May, 13
24. array comprehension shorthand es5 var temperature = [0, 37, 100]; function degToKelvin(deg) { return deg + 273; } temperature.map(degToKelvin); Sunday, 12 May, 13
25. array comprehension es6 shorthand es5 var temperature = [0, 37, 100]; function degToKelvin(deg) { return deg + 273; } temperature.map(degToKelvin); var temperature = [0, 37, 100]; [t + 273 for (t of temperature)]; 1-loop Sunday, 12 May, 13
26. var suspects = ["Miss Scarlet", "Colonel Mustard"], weapons = ["Candlestick", "Dagger"], rooms = ["Kitchen", "Ballroom"]; array comprehension es6 shorthand es5 var temperature = [0, 37, 100]; function degToKelvin(deg) { return deg + 273; } temperature.map(degToKelvin); var temperature = [0, 37, 100]; [t + 273 for (t of temperature)]; 3-loops 1-loop Sunday, 12 May, 13
27. var suspects = ["Miss Scarlet", "Colonel Mustard"], weapons = ["Candlestick", "Dagger"], rooms = ["Kitchen", "Ballroom"]; array comprehension es6 shorthand es5 var temperature = [0, 37, 100]; function degToKelvin(deg) { return deg + 273; } temperature.map(degToKelvin); var temperature = [0, 37, 100]; [t + 273 for (t of temperature)]; 3-loops 1-loop [(console.log(s + " with a " + w + " in the " + r)) for (s of suspects) for (w of weapons) for (r of rooms)]; Sunday, 12 May, 13
28. rest parameters variable args Sunday, 12 May, 13
29. rest parameters variable args es5 function push(separator) { var result = ""; for (var i = 1; i < arguments.length; i++) { result += arguments[i] + separator; } return result; } console.log( push(" ", "Mercury", "Venus", "Earth", "Mars") ); Sunday, 12 May, 13
30. function push(separator, ...items) { var result = ""; items.forEach(function(item) { result += item + separator; }); return result; } console.log( push(" ", "Mercury", "Venus", "Earth", "Mars") ); rest parameters es6 variable args es5 function push(separator) { var result = ""; for (var i = 1; i < arguments.length; i++) { result += arguments[i] + separator; } return result; } console.log( push(" ", "Mercury", "Venus", "Earth", "Mars") ); Sunday, 12 May, 13
31. function push(separator, ...items) { var result = ""; items.forEach(function(item) { result += item + separator; }); return result; } console.log( push(" ", "Mercury", "Venus", "Earth", "Mars") ); rest parameters es6 variable args es5 function push(separator) { var result = ""; for (var i = 1; i < arguments.length; i++) { result += arguments[i] + separator; } return result; } console.log( push(" ", "Mercury", "Venus", "Earth", "Mars") ); Sunday, 12 May, 13
32. spread operator es6 variable args function createURL (comment, path, protocol, subdomain, domain, tld) { var shoutout = name + ": " + protocol + "://" + subdomain + "." + domain + "." + tld + "/" + path; console.log( shoutout ); } var weblink = ["hypertext/WWW/TheProject.html", "http", "info", "cern", "ch"], comment = "World's first Website"; createURL(comment, ...weblink ); Sunday, 12 May, 13
33. compatibility table firefox chrome Sunday, 12 May, 13
34. be updated Sunday, 12 May, 13
35. start playing! google traceur Sunday, 12 May, 13
36. Sunday, 12 May, 13