ECMAScript 6 — будущее JavaScript

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

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

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

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

Transcript

1. Алексей Симоненко
   веб-евангелист HTML Academy
   Будущее JavaScript
   2014
   

   View Slide

2. Раньше
   

   View Slide

3. Сейчас
   

   View Slide

4. 12 лет между последними большими изменениями
   спецификации JavaScript
   

   View Slide

5. Новые методы базовых объектов
   Object
   String
   Array
   Number
   Math
   

   View Slide

6. Новые методы базовых объектов
   String
   String.fromCodePoint
   !
   String.prototype.contains
   String.prototype.startsWith
   String.prototype.endsWith
   String.prototype.repeat
   String.prototype.codePointAt
   String.prototype.toArray
   

   View Slide

7. Новые методы базовых объектов
   String
   'too much'.contains('too');
   // true
   'too much'.startsWith('t');
   // true
   'too much'.endsWith('t');
   // false
   18
   es6-shim
   30
   ECMAScript-6
   

   View Slide

8. Новые методы базовых объектов
   Object
   Object.is
   Object.assign
   Object.mixin
   Object.getOwnPropertyDescriptors
   Object.getPropertyDescriptor
   Object.getPropertyNames
   Object.setPrototypeOf
   

   View Slide

9. Новые методы базовых объектов
   Object
   Object.is(NaN, NaN);
   // true
   23
   19
   15
   es6-shim
   ECMAScript-6
   

   View Slide

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
    

    View Slide

11. Новые методы базовых объектов
    Array
    Array.from
    Array.of
    !
    Array.prototype.find
    Array.prototype.findIndex
    Array.prototype.fill
    

    View Slide

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
    

    View Slide

13. Новые методы базовых объектов
    Array
    var $ = document.querySelectorAll;
    !
    Array.from($('div'));
    !
    // [...]
    es6-shim
    ECMAScript-6
    

    View Slide

14. Новые методы базовых объектов
    Array
    Нет метода
    Array.prototype.unique()
    

    View Slide

15. Новые методы базовых объектов
    Number
    Number.isNaN
    Number.isFinite
    Number.isInteger
    Number.toInteger
    !
    Number.prototype.clz
    

    View Slide

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
    

    View Slide

17. Область видимости
    

    View Slide

18. Область видимости
    let
    var tag = '#wstdays';
    !
    if (true) {
    let tag = '#404fest';
    }
    11
    18
    24
    google
    traceur
    es6ify
    

    View Slide

19. Область видимости
    let
    var tag = '#wstdays';
    !
    if (true) {
    let tag = '#404fest';
    console.log(tag); // "#404fest"
    }
    !
    console.log(tag); // "#wstdays"
    11
    18
    24
    google
    traceur
    es6ify
    

    View Slide

20. Область видимости
    const
    const a = 10;
    11
    18
    24
    12
    6
    google
    traceur
    

    View Slide

21. Область видимости
    const
    const a = 10;
    a = 15;
    // SyntaxError: Assignment to constant variable.
    11
    18
    24
    12
    6
    google
    traceur
    

    View Slide

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
    

    View Slide

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
    

    View Slide

24. Коллекции
    

    View Slide

25. Коллекции
    Map
    let data = new Map();
    !
    data.set('key', 100);
    data.set(undefined, 'some text');
    11
    18
    29
    es6-shim
    harmony-
    collections
    ECMAScript-6
    

    View Slide

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
    

    View Slide

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
    

    View Slide

28. Коллекции
    Map
    let fn = function() {
    console.log('inside?');
    };
    11
    18
    29
    es6-shim
    harmony-
    collections
    ECMAScript-6
    

    View Slide

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
    

    View Slide

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
    

    View Slide

31. Коллекции
    Set
    let data = new Set([1, 3, 5, 3]);
    11
    24
    29
    es6-shim
    harmony-
    collections
    ECMAScript-6
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

35. Коллекции
    for-of
    let tags = ['#f8', '#wstdays'];
    !
    for (let tag in tags) {
    console.log(tag);
    }
    !
    // 0, 1
    

    View Slide

36. Коллекции
    for-of 13
    google
    traceur
    es6ify
    let tags = ['#f8', '#wstdays'];
    !
    for (let tag of tags) {
    console.log(tag);
    }
    !
    // "#f8", "#wstdays"
    

    View Slide

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
    

    View Slide

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
    

    View Slide

39. Коллекции
    WeakMap
    let a = document.querySelector('a');
    let data = new WeakMap();
    !
    data.set(a, 'some text');
    11
    23
    29
    

    View Slide

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
    

    View Slide

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
    

    View Slide

42. Странные конструкции
    

    View Slide

43. let [a, b, c] = [10, 20, 30];
    !
    // a = 10, b = 20, c = 30
    Странные конструкции
    Destructuring assignment 12
    google
    traceur
    es6ify
    

    View Slide

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
    

    View Slide

45. let [a, [[b], c]] = [10, [[20], 30]];
    !
    // a = 10, b = 20, c = 30
    Странные конструкции
    Destructuring assignment 12
    google
    traceur
    es6ify
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

50. let name = 'Alexey';
    let mail = 'alexey@htmlacademy.ru';
    !
    let user = {'name': name, 'mail': mail};
    Странные конструкции
    Object literal property value shorthand
    google
    traceur
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

55. function elastic(...items) {
    console.log(items);
    }
    !
    elastic('#404fest', '#dconf', '#wstdays');
    !
    // ["#404fest", "#dconf", "#wstdays"]
    Странные конструкции
    Rest parameter 16
    google
    traceur
    es6ify
    

    View Slide

56. Странные конструкции
    Нет метода
    Array.prototype.unique()?
    Сделаем его сами
    

    View Slide

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
    

    View Slide

58. Функции
    6 000 000 °
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

62. Функции
    Default argument
    function fn(that = this) {
    !
    setTimeout(function() {
    console.log(that);
    }, 100);
    !
    }
    16
    google
    traceur
    es6ify
    

    View Slide

63. Функции
    Arrow function 23
    es6ify
    harmonizr
    google
    traceur
    [1, 15].find(function(num) {
    return num / 3 === 5;
    });
    

    View Slide

64. Функции
    Arrow function
    [1, 15].find(num => num / 3 === 5);
    23
    es6ify
    harmonizr
    google
    traceur
    [1, 15].find(function(num) {
    return num / 3 === 5;
    });
    

    View Slide

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;
    });
    

    View Slide

66. Генераторы
    

    View Slide

67. Генераторы
    function* compute(degree) {
    let num = 1;
    !
    while (true) {
    yield num;
    num = num * degree;
    }
    }
    !
    let gen = compute(2);
    26
    29
    google
    traceur
    es6ify
    regenerator
    

    View Slide

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
    

    View Slide

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
    

    View Slide

70. Генераторы
    function* seq(a) {
    yield a + 5;
    !
    let b = yield null;
    !
    return a + b;
    }
    !
    let gen = seq(5);
    26
    29
    google
    traceur
    es6ify
    regenerator
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

74. Классы
    

    View Slide

75. Классы
    class Employee {
    constructor(title) {
    this.title = title;
    }
    !
    who() {
    console.log(this.title);
    }
    }
    google
    traceur
    es6ify
    harmonizr
    

    View Slide

76. Классы
    class Employee {
    constructor(title) {
    this.title = title;
    }
    !
    who() {
    console.log(this.title);
    }
    }
    let ryan = new Employee('Райан Стоун');
    ryan.who();
    !
    // Райан Стоун
    google
    traceur
    es6ify
    harmonizr
    

    View Slide

77. Классы
    class Chief extends Employee {
    constructor(firstname, surname, role) {
    super(firstname + ' ' + surname);
    this.role = role;
    }
    !
    fire(person) {
    person.dismiss();
    }
    }
    google
    traceur
    es6ify
    harmonizr
    

    View Slide

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
    

    View Slide

79. А что же там с Internet Explorer?
    

    View Slide

80. let
    const
    Map
    Set
    WeakMap
    

    View Slide

81. simonenko simonenko simonenko.su
    Спасибо.
    

    View Slide