ECMAScript 6 — будущее JavaScript

Способы применения JavaScript сильно изменились за последнее время. Но сам язык начал меняться только сейчас. Я расскажу вам, что нового нас ожидает в ECMAScript 6. Вот несколько тезисов:

— новые методы базовых объектов,
— управление областью видимости,
— работа с коллекциями,
— мой любимый «…» префикс,
— генераторы,
— классы.

И, конечно, не забуду рассказать, что из этого можно использовать уже сейчас.

Ссылка на видео c 404 фестиваля: http://www.youtube.com/watch?v=oJI397SbOOc

Transcript

1. Алексей Симоненко веб-евангелист HTML Academy Будущее JavaScript 2014
2. Раньше
3. Сейчас
4. 12 лет между последними большими изменениями спецификации JavaScript
5. Новые методы базовых объектов Object String Array Number Math
6. Новые методы базовых объектов String String.fromCodePoint ! String.prototype.contains String.prototype.startsWith String.prototype.endsWith String.prototype.repeat String.prototype.codePointAt String.prototype.toArray
7. Новые методы базовых объектов String 'too much'.contains('too'); // true 'too much'.startsWith('t'); // true 'too much'.endsWith('t'); // false 18 es6-shim 30 ECMAScript-6
8. Новые методы базовых объектов Object Object.is Object.assign Object.mixin Object.getOwnPropertyDescriptors Object.getPropertyDescriptor Object.getPropertyNames Object.setPrototypeOf
9. Новые методы базовых объектов Object Object.is(NaN, NaN); // true 23 19 15 es6-shim ECMAScript-6
10. Новые методы базовых объектов Object Object.assign({a: 1, b: 3}, {b: 2}); // {a: 1, b: 2} Object.is(NaN, NaN); // true 23 19 15 es6-shim ECMAScript-6
11. Новые методы базовых объектов Array Array.from Array.of ! Array.prototype.find Array.prototype.findIndex Array.prototype.fill
12. Новые методы базовых объектов Array [1, 15, 7].find(function(num) { return num / 3 === 5; }); // 15 [1, 15, 7].findIndex(function(num) { return num / 3 === 5; }); // 1 25 30 es6-shim
13. Новые методы базовых объектов Array var $ = document.querySelectorAll; ! Array.from($('div')); ! // [...] es6-shim ECMAScript-6
14. Новые методы базовых объектов Array Нет метода Array.prototype.unique()
15. Новые методы базовых объектов Number Number.isNaN Number.isFinite Number.isInteger Number.toInteger ! Number.prototype.clz
16. Новые методы базовых объектов Math Math.sign Math.imul Math.log1p Math.log2 Math.log10 Math.expm1 Math.fround Math.hypot Math.trunc Math.cosh Math.sinh Math.tanh Math.acosh Math.asinh Math.atanh
17. Область видимости
18. Область видимости let var tag = '#wstdays'; ! if (true) { let tag = '#404fest'; } 11 18 24 google traceur es6ify
19. Область видимости let var tag = '#wstdays'; ! if (true) { let tag = '#404fest'; console.log(tag); // "#404fest" } ! console.log(tag); // "#wstdays" 11 18 24 google traceur es6ify
20. Область видимости const const a = 10; 11 18 24 12 6 google traceur
21. Область видимости const const a = 10; a = 15; // SyntaxError: Assignment to constant variable. 11 18 24 12 6 google traceur
22. Область видимости const const a = 10; a = 15; // SyntaxError: Assignment to constant variable. var a = 15; // SyntaxError: Variable 'a' has already been declared 11 18 24 12 6 google traceur
23. Область видимости const var a = 15; ! if (true) { const a = 10; console.log(a); // 10 } ! console.log(a); // 15 18 11 24 12 6 google traceur
24. Коллекции
25. Коллекции Map let data = new Map(); ! data.set('key', 100); data.set(undefined, 'some text'); 11 18 29 es6-shim harmony- collections ECMAScript-6
26. Коллекции Map let data = new Map(); ! data.set('key', 100); data.set(undefined, 'some text'); data.has('tags'); // false data.has(undefined); // true 11 18 29 es6-shim harmony- collections ECMAScript-6
27. Коллекции Map let data = new Map(); ! data.set('key', 100); data.set(undefined, 'some text'); data.has('tags'); // false data.has(undefined); // true data.delete(undefined); data.has(undefined); // false 11 18 29 es6-shim harmony- collections ECMAScript-6
28. Коллекции Map let fn = function() { console.log('inside?'); }; 11 18 29 es6-shim harmony- collections ECMAScript-6
29. Коллекции Map let fn = function() { console.log('inside?'); }; 11 18 29 es6-shim harmony- collections let data = new Map(); ! data.set(fn, '#wstdays'); ECMAScript-6
30. Коллекции Map let fn = function() { console.log('inside?'); }; data.get(fn); // "#wstdays" 11 18 29 es6-shim harmony- collections let data = new Map(); ! data.set(fn, '#wstdays'); ECMAScript-6
31. Коллекции Set let data = new Set([1, 3, 5, 3]); 11 24 29 es6-shim harmony- collections ECMAScript-6
32. Коллекции Set let data = new Set([1, 3, 5, 3]); data.add(3); data.add(7); 11 24 29 es6-shim harmony- collections ECMAScript-6
33. Коллекции Set let data = new Set([1, 3, 5, 3]); data.add(3); data.add(7); data.has(3); // true data.has(9); // false 11 24 29 es6-shim harmony- collections ECMAScript-6
34. Коллекции Set let data = new Set([1, 3, 5, 3]); data.add(3); data.add(7); data.has(3); // true data.has(9); // false data.delete(3); data.has(3); // false 11 24 29 es6-shim harmony- collections ECMAScript-6
35. Коллекции for-of let tags = ['#f8', '#wstdays']; ! for (let tag in tags) { console.log(tag); } ! // 0, 1
36. Коллекции for-of 13 google traceur es6ify let tags = ['#f8', '#wstdays']; ! for (let tag of tags) { console.log(tag); } ! // "#f8", "#wstdays"
37. Коллекции for-of let tags = new Set([ '#f8', '#wstdays', '#f8' ]); ! for (let tag of tags) { console.log(tag); } ! // "#f8", "#wstdays" 24 es6-shim harmony- collections google traceur es6ify ECMAScript-6
38. Коллекции for-of let data = new Map(); ! data.set('f8', {'a': 1, 'b': 0}); data.set('wd', {'a': 0, 'b': 1}); ! for (let params of data) { console.log(params); } ! // ["f8", {"a": 1, "b": 0}] // ["wd", {"a": 0, "b": 1}] 18 es6-shim harmony- collections google traceur es6ify ECMAScript-6
39. Коллекции WeakMap let a = document.querySelector('a'); let data = new WeakMap(); ! data.set(a, 'some text'); 11 23 29
40. Коллекции WeakMap let a = document.querySelector('a'); let data = new WeakMap(); ! data.set(a, 'some text'); data.has(a); // true data.get(a); // "some text" 11 23 29
41. Коллекции WeakMap let a = document.querySelector('a'); let data = new WeakMap(); ! data.set(a, 'some text'); data.has(a); // true data.get(a); // "some text" a = null; data.has(a); // false 11 23 29
42. Странные конструкции
43. let [a, b, c] = [10, 20, 30]; ! // a = 10, b = 20, c = 30 Странные конструкции Destructuring assignment 12 google traceur es6ify
44. let [a, b, c] = [10, 20, 30]; ! // a = 10, b = 20, c = 30 let a = 10; let b = 20; ! [a, b] = [b, a]; ! // a = 20, b = 10 Странные конструкции Destructuring assignment 12 google traceur es6ify
45. let [a, [[b], c]] = [10, [[20], 30]]; ! // a = 10, b = 20, c = 30 Странные конструкции Destructuring assignment 12 google traceur es6ify
46. let [a, [[b], c]] = [10, [[20], 30]]; ! // a = 10, b = 20, c = 30 let [, m, d, y] = Date().split(' '); ! // m = "Mar", d = "15", y = "2014" Странные конструкции Destructuring assignment 12 google traceur es6ify
47. let data = {a: 10, b: 20, c: 30}; let {a, b, c} = data; ! // a = 10, b = 20, c = 30 Странные конструкции Destructuring assignment 12 google traceur es6ify
48. let data = {a: 10, b: 20, c: 30}; let {a, b, c} = data; ! // a = 10, b = 20, c = 30 let {parse, stringify} = JSON; Странные конструкции Destructuring assignment 12 google traceur es6ify
49. function today() { return {d: 15, m: 2, y: 2014}; } ! let {m: month, y: year} = today(); ! // month = 2, year = 2014 Странные конструкции Destructuring assignment 12 google traceur es6ify
50. let name = 'Alexey'; let mail = 'alexey@htmlacademy.ru'; ! let user = {'name': name, 'mail': mail}; Странные конструкции Object literal property value shorthand google traceur
51. let name = 'Alexey'; let mail = 'alexey@htmlacademy.ru'; ! let user = {'name': name, 'mail': mail}; let user = {name, mail}; ! // { // "name": "Alexey", // "mail": "alexey@htmlacademy.ru" // } Странные конструкции Object literal property value shorthand google traceur
52. Странные конструкции let data = new Map(); ! data.set('f8', {'a': 1, 'b': 0}); data.set('wd', {'a': 0, 'b': 1}); ! for (let [name, {a}] of data) { console.log(name, a); } ! // "f8", 1 // "wd", 0 18 es6-shim ECMAScript-6 harmony- collections google traceur es6ify
53. let params = [2014, 2, 15, 15, 0]; let date = new Date(...params); ! // Sat Mar 15 2014 15:00:00 GMT+0400 (MSK) Странные конструкции Spread operator 16 google traceur es6ify
54. let params = [2014, 2, 15, 15, 0]; let date = new Date(...params); ! // Sat Mar 15 2014 15:00:00 GMT+0400 (MSK) let soon = ['#404fest', '#wstdays']; let last = ['#yac', ...soon, '#f8']; ! // ["#yac", "#404fest", "#wstdays", "#f8"] Странные конструкции Spread operator 16 google traceur es6ify
55. function elastic(...items) { console.log(items); } ! elastic('#404fest', '#dconf', '#wstdays'); ! // ["#404fest", "#dconf", "#wstdays"] Странные конструкции Rest parameter 16 google traceur es6ify
56. Странные конструкции Нет метода Array.prototype.unique()? Сделаем его сами
57. let data = [ 10, 20, 10, 35, 'S', 'Y', 'S', 35, 10, 'S' ]; ! let unique = [...new Set(data)]; ! // [10, 20, 35, "S", "Y"] 24 google traceur es6ify Странные конструкции Array.prototype.unique
58. Функции 6 000 000 °
59. Функции Default argument function fn(a, b = true, c ='hi') { console.log(a, b, c); } ! fn(10); // a = 10, b = true, c = "hi" 16 google traceur es6ify
60. Функции Default argument function fn(a, b = true, c ='hi') { console.log(a, b, c); } ! fn(10); // a = 10, b = true, c = "hi" fn(10, 'world', null); // a = 10, b = "world", c = null 16 google traceur es6ify
61. Функции Default argument function fn(a, b = true, c ='hi') { console.log(a, b, c); } ! fn(10); // a = 10, b = true, c = "hi" fn(10, 'world', undefined); // a = 10, b = "world", c = "hi" fn(10, 'world', null); // a = 10, b = "world", c = null 16 google traceur es6ify
62. Функции Default argument function fn(that = this) { ! setTimeout(function() { console.log(that); }, 100); ! } 16 google traceur es6ify
63. Функции Arrow function 23 es6ify harmonizr google traceur [1, 15].find(function(num) { return num / 3 === 5; });
64. Функции Arrow function [1, 15].find(num => num / 3 === 5); 23 es6ify harmonizr google traceur [1, 15].find(function(num) { return num / 3 === 5; });
65. Функции Arrow function [1, 15].find(num => { let test = num / 3; return test === 5; }); [1, 15].find(num => num / 3 === 5); 23 es6ify harmonizr google traceur [1, 15].find(function(num) { return num / 3 === 5; });
66. Генераторы
67. Генераторы function* compute(degree) { let num = 1; ! while (true) { yield num; num = num * degree; } } ! let gen = compute(2); 26 29 google traceur es6ify regenerator
68. Генераторы function* compute(degree) { let num = 1; ! while (true) { yield num; num = num * degree; } } ! let gen = compute(2); gen.next(); // { value: 1, done: false } gen.next(); // { value: 2, done: false } gen.next(); // { value: 4, done: false } gen.next(); // { value: 8, done: false } gen.next(); // { value: 16, done: false } 26 29 google traceur es6ify regenerator
69. Генераторы 26 29 function* compute(degree) { let num = 1; ! while (true) { yield num; num = num * degree; } } ! for (let degree of compute(2)) { if (degree > 64) break; ! console.log(degree); } ! // 1, 2, 4, 8, 16, 32, 64 google traceur es6ify regenerator
70. Генераторы function* seq(a) { yield a + 5; ! let b = yield null; ! return a + b; } ! let gen = seq(5); 26 29 google traceur es6ify regenerator
71. Генераторы function* seq(a) { yield a + 5; ! let b = yield null; ! return a + b; } ! let gen = seq(5); gen.next(); // { value: 10, done: false } 26 29 google traceur es6ify regenerator
72. Генераторы function* seq(a) { yield a + 5; ! let b = yield null; ! return a + b; } ! let gen = seq(5); gen.next(); // { value: 10, done: false } gen.next(); // { value: null, done: false } 26 29 google traceur es6ify regenerator
73. Генераторы function* seq(a) { yield a + 5; ! let b = yield null; ! return a + b; } ! let gen = seq(5); gen.next(); // { value: 10, done: false } gen.next(); // { value: null, done: false } gen.next(8); // { value: 13, done: true } 26 29 google traceur es6ify regenerator
74. Классы
75. Классы class Employee { constructor(title) { this.title = title; } ! who() { console.log(this.title); } } google traceur es6ify harmonizr
76. Классы class Employee { constructor(title) { this.title = title; } ! who() { console.log(this.title); } } let ryan = new Employee('Райан Стоун'); ryan.who(); ! // Райан Стоун google traceur es6ify harmonizr
77. Классы class Chief extends Employee { constructor(firstname, surname, role) { super(firstname + ' ' + surname); this.role = role; } ! fire(person) { person.dismiss(); } } google traceur es6ify harmonizr
78. Классы class Chief extends Employee { constructor(firstname, surname, role) { super(firstname + ' ' + surname); this.role = role; } ! fire(person) { person.dismiss(); } } let mat = new Chief('Мэтт', 'Ковальски', 'owner'); mat.who(); ! // Мэтт Ковальски google traceur es6ify harmonizr
79. А что же там с Internet Explorer?
80. let const Map Set WeakMap
81. simonenko simonenko simonenko.su Спасибо.