Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ECMAScript 6 — будущее JavaScript

ECMAScript 6 — будущее JavaScript

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

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

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

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

Alexey Simonenko

March 15, 2014
Tweet

More Decks by Alexey Simonenko

Other Decks in Programming

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 = '[email protected]';
    !
    let user = {'name': name, 'mail': mail};
    Странные конструкции
    Object literal property value shorthand
    google
    traceur

    View Slide

  51. let name = 'Alexey';
    let mail = '[email protected]';
    !
    let user = {'name': name, 'mail': mail};
    let user = {name, mail};
    !
    // {
    // "name": "Alexey",
    // "mail": "[email protected]"
    // }
    Странные конструкции
    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