История и обзор нововведений в ECMA2015

1. Обзор ES2015(ES6)
Александр Филатов
greybax
Фронтенд разработчик в Akvelon
(vendor в Microsoft)
1

2. 10 лет в мире JavaScript был штиль...

3. Как вдруг...

4. 17 июня 2015 года генеральное собрание Ecma International
официально одобрило стандарт ECMA-262 6 версии
4

5. Термины

6. • TC39 (Ecma Technical Committee 39): комитет по развитию стандарта
ECMA-262.
• ECMAScript: официальное название языка
• JavaScript - это диалект языка ECMAScript
• ECMAScript Harmony: улучшения после ECMAScript 5 (ES6 и ES7)
• ECMAScript.next: кодовое название ECMAScript 6
6

7. История

8. История
8

9. Что нового?

10. Шаблоны строк
"В ES5 n - это перенос строки."
`В ES6 стало возможным
писать так.`
var name = 'John', age = 22;
`${name} is ${age} years old`
Спецификация 12.2.9, 12.3.7
10

11. let + const
function f() {
let x;
{
const x = "sneaky"; // ok, block scoped name
x = "foo"; // error, const
}
let x = "inner"; // error, already declared in block
}
Спецификация 13.2.1
11

12. Сокращённый формат задания объектов
var a = {'obj1': obj1, 'obj2': obj2}
// аналогично
var a = {obj1, obj2}
Спецификация 13.2.1
12

13. Значения по умолчанию для аргументов
функций
function f(x, y=12 ) {
return x + y;
}
f(3) == 15 //true
Спецификация 19.2
13

14. Спецификация 15.2
Модули

15. Модули
Позволяют загружать код по требованию (асинхронно) и
обеспечивают уровень абстракции
15

16. Модули
Экспорт
// calculator/lib/calc.js
let notExported = 'abc';
export function square(x) {
return x * x;
}
export const MY_CONSTANT = 123;
16

17. Модули
Импорт
// calculator/main.js
import { square } from 'lib/calc';
console.log(square(3));
17

18. Модули
Импорт
import { square, MY_CONSTANT } from 'lib/calc';
import 'lib/calc' as c;
import { square as squ } from 'lib/calc';
18

19. Модули
Настройка загрузки модулей
• проверка валидности модуля при импорте (к примеру при помощи
JSHint)
• автоматическая трансляция модулей при импорте (они могут
содержать код CoffeeScript или TypeScript);
• использовать существующие модули (AMD, Node.js)
19

20. Спецификация 14.2
Arrow-функции

21. Arrow-функции
Для быстрого определения анонимных функций
var x = function () {}
• собственный scope
• нет неявного return
let x = () => {}
• "лексический" scope
• есть неявный return, но не всегда
21

22. Arrow-функции
По-старому: сохраняем this
this.x = "yes";
var self = this;
var y = function (){
"use strict"
console.log( self .x)
};
22

23. Arrow-функции
По-новому: this из внешнего scope
this.x = "yes";
let y = () => {
"use strict"
console.log(this.x)
};
y(); //'yes'
23

24. Arrow-функции
Неявный return
let add = (a,b) => a + b;
add(2, 3); //5
Явный return
let add = (a,b) => { return a + b };
add(2, 3); //5
24

25. Спецификация 14.2
Symbol

26. Тип Symbol
Применяется для идентификаторов свойств объектов.
var sym1 = Symbol();
var sym2 = Symbol("foo");
var sym3 = Symbol("foo");
Symbol("foo") === Symbol("foo"); // false O_o
26

27. Тип Symbol
Пример
var MyClass = (function() {
var key = Symbol("key") ; // module scoped symbol
function MyClass(prvtData) {
this[key] = prvtData;
}
return MyClass;
})();
var c = new MyClass("hello")
c["key"] === undefined
27

28. Тип Symbol
Символы не приватные!
Симовол уникален , но не приватен , т.к он может быть получен в
результате рефлексии через метод
Object.getOwnPropertySymbols
28

29. Спецификация 23.1 - 23.4
Cтруктуры
данных

30. Map и Set
Упрощают работу со специфичными типами коллекций. Map позволяет
определять коллекции наборов в формате ключ/значение. В качестве
ключа и значения могут выступать любые выражения JavaScript. По
аналогии Set позволяет задать множество любых выражений
JavaScript
30

31. Map
let data = new Map();
data.set('key', 100);
data.set(undefined, 'some text');
data.has('tag'); //false
data.has(undefined); //true
data.delete(undefined);
data.has(undefined); //false
31

32. Set
let data = new Set([1, 3, 5, 3]);
data.add(3);
data.size; // 3
data.add(7);
data.has(3); //true
data.has(9); //false
data.delete(3);
data.has(3); //false
32

33. WeakSet и WeakMap
То же самое, но безопасно , т.е не заботимся об утечках памяти!
Объект удаляется, если на него больше не осталось ссылок, кроме
ссылки из текущей коллекции, что позволяет не беспокоиться об
утечках памяти.
33

34. WeakMap
let activeUsers = [
{name: "Vasia"},
{name: "Petia"},
{name: "Masha"}
];
// вспомогательная информация хранится отдельно
let weakMap = new WeakMap();
weakMap.set(activeUsers[0], 1);
weakMap.set(activeUsers[1], 2);
weakMap.set(activeUsers[2], 3);
weakMap.get(activeUsers[0]); // 1
activeUsers.splice(0, 1); // Вася более не активный пользователь
// weakMap теперь содержит только 2 элемента
activeUsers.splice(0, 1); // Петя более не активный пользователь
// weakMap теперь содержит только 1 элемент
JS Result Edit on
34

35. Cтруктуры данных
Итог
• Map — коллекция записей вида ключ: значение. Допускает любые
ключи.
• Set — коллекция уникальных элементов, также допускает любые
ключи.
• WeakMap и WeakSet — «урезанные» варианты Map/Set. Не
коллекции. Ключи только Object. Если ссылка на объект осталась
только в WeakMap/WeakSet — объект удаляется.
35

36. For-of

37. For-of
Как 20 лет назад...
for (var index = 0; index < myArray.length; index++) {
console.log(myArray[index]);
}
37

38. For-of
Как в ES5
myArray. forEach (function (value) {
console.log(value);
});
38

39. For-of
А как насчет For-in?
for (var index in myArray) {
console.log(myArray[index]);
}
но так делать не стоит...
• строковая арифметика (index - строка)
• проходит по expando-свойствам и свойствам из цепочки прототипов
• проход в случайном порядке! О_о
39

40. For-of
Нас спасет!
for (var index of myArray) {
console.log(myArray[index]);
}
Выглядит неплохо
• самый лаконичный и наглядный синтаксис
• нет недостатков for-in
• в отличие от forEach(), он работает с break, continue и return
40

41. For-of
Итог
• for-in нужен для перебора свойств объекта.
• for-of нужен для перебора данных, например, значений массива
• for-of также хорошо работает с большинством массивоподобных
объектов, вроде списков NodeList в DOM
• Работает с объектами Map и Set
• Работает со строками, рассматривая строку как набор символов
Unicode
41

42. Спецификация 25.2
Генераторы

43. Генераторы
Генератор - позволяет организовать эффективное выполнение
функций в асинхронном режиме.
43

44. Генераторы
function* quips(name) {
yield "Hi " + name + "!";
yield "I'm glad that I can participate in 10th meetup in Yaroslavl";
yield "Goodbye!";
}
var meow_iter = quips("Yaroslavl Frontend Meetup");
$("#meow-btn").click(function() {
var result = meow_iter.next();
$("#chat").text(result.value);
if (result.done) {
$("#chat").text("");
$("#chat").text(result.value);
meow_iter = quips("Yaroslavl Frontend Meetup");
}
});
HTML CSS JS Result Edit on
44

45. Итератор:
class RangeIterator {
constructor(start, stop) {
this.value = start;
this.stop = stop;
}
[Symbol.iterator]() { return this; }
next() {
var value = this.value;
if (value < this.stop) { this.value++;
return {done: false, value: value};
} else {
return {done: true, value:
undefined};
}
}
}
function range(start, stop) {
return new RangeIterator(start, stop);
}
JS Result Edit on
Генератор:
function* range(start, stop) {
for (var i = start; i < stop; i++)
yield i;
}
JS Result Edit on
Генераторы. Зачем?
45

46. Генераторы
for (var value of range(10, 1000) ) {
console.log(value);
}
46

47. Генераторы
Где применить возможность генераторов вести себя как итераторы?
• Преобразование любого объекта в итерируемый
• Упрощение функций, создающих массивы
• Результаты необычной длины
• Рефакторинг сложных циклов
• Утилиты для работы с итерируемыми объектами
47

48. Генераторы
Генератор это
• Итератор, а итератор — это новый стандарт для данных и циклов во
всём ES6
• Попытка избежать спагетти кода в асинхронном коде. К примеру
Q.async() - это экспериментальная попытка сделать асинхронный код
похожим на синхронный при помощи генераторов и промисов
48

49. Спецификация 25.4
Promise

50. Promise
Предназначен для получения значений в асинхронном режиме.
Позволяет определить значение, которое пока неизвестно, но будут
определено через какое-то время
50

51. Promise
};
})
});
});
});
});
Это боль...
51

52. Promise
new Promise ( resolve , reject ) {
if (testSomething) {
resolve (resValue);
} else {
reject (errValue);
});
52

53. Promise
requestFromServer()
.then(function(res) {return res2;})
.then(function(res2) {return res3;})
...
.then(function(res3) {return res4;})
Так лучше!
53

54. Спецификация 14.5
Классы

55. Классы
class Animal {
constructor() {
this.speed = 0;
}
toString() {
return this.speed === 0 ? ' sleep' : ' play'
}
}
55

56. Классы
extends
class Cat extends Animal {
constructor() {
super();
this.speed = 10;
}
}
56

57. Классы
let dog = new Animal();
let cat = new Cat();
console.log(dog.toString()); // sleep
console.log(cat.toString()); // play
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
57

58. Классы
static
class Util {
static inc(x) {return x + 1},
static dec(x) {return x - 1}
}
console.log(Util.inc(5)); // 6
58

59. Классы
get/set
class O {
constructor() {
this.mx = 'initial';
}
get x() { return this.mx; }
set x(val) { this.mx = val; }
}
59

60. Классы
"поднятие"
var a = new ClassA(2); // ReferenceError
class ClassA {
constructor(n) {
this.x = n;
}
}
60

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

62. Новые методы базовых объектов
Object.is(0, -0); // false
Object.is(NaN, NaN) // true !
0 === -0; // true
NaN === NaN; // false
Использует SameValue(x, y) алгоритм
62

63. Ситуация сейчас

65. Хочу
использовать уже
сейчас!

66. Как использовать новые возможности
ES2015 уже сейчас?
• chrome://flags/ -> Включить
• в io.js или Node достаточно включить флаг --harmony
• использовать транспайлеры es6-tools
66

68. Что умеет Babel?
• Поддержка новых фич и синтаксиса ES2015(ES6)
• Поддержка новых фич и синтаксиса ES2016(ES7)
• Транспайлинг некоторых фич напрямую в ES5
• Поддержка некоторых фич через полифилы
• Поддерживается пока не все (в частности Proxy)
68

69. Что дальше?

70. Будущее Javascript
• Транспайлинг - не только как переходный этап
• Как только браузер начнет поддерживать новую фичу, отключаем ее
транспайлинг
70

71. И это еще не все...

72. Ссылки
• Официальная спецификация ES 2015
• Exploring ES6: Upgrade to the next version of JavaScript
• es6-features.org
• Цикл статей ES6 In Depth
• Frontender Magazine
72

73. Спасибо!

74. Вопросы?