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

Cdb785d19869dba4d32c47a93e8a5031?s=128

Alexey Simonenko

March 15, 2014
Tweet

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 Спасибо.