ECMAScript 6 — будущее JavaScript

ECMAScript 6 — будущее JavaScript

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

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

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

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

Cdb785d19869dba4d32c47a93e8a5031?s=128

Alexey Simonenko

March 15, 2014
Tweet

Transcript

  1. 7.

    Новые методы базовых объектов String 'too much'.contains('too'); // true 'too

    much'.startsWith('t'); // true 'too much'.endsWith('t'); // false 18 es6-shim 30 ECMAScript-6
  2. 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
  3. 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
  4. 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
  5. 18.

    Область видимости let var tag = '#wstdays'; ! if (true)

    { let tag = '#404fest'; } 11 18 24 google traceur es6ify
  6. 19.

    Область видимости let var tag = '#wstdays'; ! if (true)

    { let tag = '#404fest'; console.log(tag); // "#404fest" } ! console.log(tag); // "#wstdays" 11 18 24 google traceur es6ify
  7. 21.

    Область видимости const const a = 10; a = 15;

    // SyntaxError: Assignment to constant variable. 11 18 24 12 6 google traceur
  8. 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
  9. 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
  10. 25.

    Коллекции Map let data = new Map(); ! data.set('key', 100);

    data.set(undefined, 'some text'); 11 18 29 es6-shim harmony- collections ECMAScript-6
  11. 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
  12. 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
  13. 28.

    Коллекции Map let fn = function() { console.log('inside?'); }; 11

    18 29 es6-shim harmony- collections ECMAScript-6
  14. 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
  15. 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
  16. 31.

    Коллекции Set let data = new Set([1, 3, 5, 3]);

    11 24 29 es6-shim harmony- collections ECMAScript-6
  17. 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
  18. 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
  19. 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
  20. 35.

    Коллекции for-of let tags = ['#f8', '#wstdays']; ! for (let

    tag in tags) { console.log(tag); } ! // 0, 1
  21. 36.

    Коллекции for-of 13 google traceur es6ify let tags = ['#f8',

    '#wstdays']; ! for (let tag of tags) { console.log(tag); } ! // "#f8", "#wstdays"
  22. 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
  23. 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
  24. 39.
  25. 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
  26. 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
  27. 43.

    let [a, b, c] = [10, 20, 30]; ! //

    a = 10, b = 20, c = 30 Странные конструкции Destructuring assignment 12 google traceur es6ify
  28. 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
  29. 45.

    let [a, [[b], c]] = [10, [[20], 30]]; ! //

    a = 10, b = 20, c = 30 Странные конструкции Destructuring assignment 12 google traceur es6ify
  30. 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
  31. 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
  32. 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
  33. 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
  34. 50.

    let name = 'Alexey'; let mail = 'alexey@htmlacademy.ru'; ! let

    user = {'name': name, 'mail': mail}; Странные конструкции Object literal property value shorthand google traceur
  35. 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
  36. 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
  37. 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
  38. 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
  39. 55.

    function elastic(...items) { console.log(items); } ! elastic('#404fest', '#dconf', '#wstdays'); !

    // ["#404fest", "#dconf", "#wstdays"] Странные конструкции Rest parameter 16 google traceur es6ify
  40. 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
  41. 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
  42. 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
  43. 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
  44. 62.

    Функции Default argument function fn(that = this) { ! setTimeout(function()

    { console.log(that); }, 100); ! } 16 google traceur es6ify
  45. 64.

    Функции Arrow function [1, 15].find(num => num / 3 ===

    5); 23 es6ify harmonizr google traceur [1, 15].find(function(num) { return num / 3 === 5; });
  46. 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; });
  47. 67.

    Генераторы function* compute(degree) { let num = 1; ! while

    (true) { yield num; num = num * degree; } } ! let gen = compute(2); 26 29 google traceur es6ify regenerator
  48. 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
  49. 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
  50. 70.

    Генераторы function* seq(a) { yield a + 5; ! let

    b = yield null; ! return a + b; } ! let gen = seq(5); 26 29 google traceur es6ify regenerator
  51. 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
  52. 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
  53. 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
  54. 75.

    Классы class Employee { constructor(title) { this.title = title; }

    ! who() { console.log(this.title); } } google traceur es6ify harmonizr
  55. 76.

    Классы class Employee { constructor(title) { this.title = title; }

    ! who() { console.log(this.title); } } let ryan = new Employee('Райан Стоун'); ryan.who(); ! // Райан Стоун google traceur es6ify harmonizr
  56. 77.

    Классы class Chief extends Employee { constructor(firstname, surname, role) {

    super(firstname + ' ' + surname); this.role = role; } ! fire(person) { person.dismiss(); } } google traceur es6ify harmonizr
  57. 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