Обзор ES2015(ES6)

Александр Филатовgreybax

Фронтенд разработчик в Akvelon(vendor в Microsoft)

1

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

Как вдруг...

17 июня 2015 года генеральное собрание Ecma International

официально одобрило стандарт ECMA-262 6 версии

4

Термины

• TC39 (Ecma Technical Committee 39): комитет по развитию стандарта

ECMA-262.

• ECMAScript: официальное название языка

• JavaScript - это диалект языка ECMAScript

• ECMAScript Harmony: улучшения после ECMAScript 5 (ES6 и ES7)

• ECMAScript.next: кодовое название ECMAScript 6

6

История

История

8

Что нового?

Шаблоны строк"В ES5 \n - это перенос строки."

`В ES6 стало возможным

писать так.`

var name = 'John', age = 22;

`${name} is ${age} years old`

Спецификация 12.2.9, 12.3.7

10

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

Сокращённый формат задания объектовvar a = {'obj1': obj1, 'obj2': obj2}

// аналогично

var a = {obj1, obj2}

Спецификация 13.2.1

12

Значения по умолчанию для аргументовфункцийfunction f(x, y=12 ) {

return x + y;

}

f(3) == 15 //true

Спецификация 19.2

13

Спецификация 15.2

Модули

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

обеспечивают уровень абстракции

15

МодулиЭкспорт

// calculator/lib/calc.js

let notExported = 'abc';

export function square(x) {

return x * x;

}

export const MY_CONSTANT = 123;

16

МодулиИмпорт

// calculator/main.js

import { square } from 'lib/calc';

console.log(square(3));

17

МодулиИмпорт

import { square, MY_CONSTANT } from 'lib/calc';

import 'lib/calc' as c;

import { square as squ } from 'lib/calc';

18

МодулиНастройка загрузки модулей

• проверка валидности модуля при импорте (к примеру при помощи

JSHint)

• автоматическая трансляция модулей при импорте (они могут

содержать код CoffeeScript или TypeScript);

• использовать существующие модули (AMD, Node.js)

19

Спецификация 14.2

Arrow-функции

Arrow-функцииДля быстрого определения анонимных функций

var x = function () {}

• собственный scope

• нет неявного return

let x = () => {}

• "лексический" scope

• есть неявный return, но не всегда

21

Arrow-функцииПо-старому: сохраняем this

this.x = "yes";

var self = this;

var y = function (){

"use strict"

console.log( self .x)

};

22

Arrow-функцииПо-новому: this из внешнего scope

this.x = "yes";

let y = () => {

"use strict"

console.log(this.x)

};

y(); //'yes'

23

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

Спецификация 14.2

Symbol

Тип SymbolПрименяется для идентификаторов свойств объектов.

var sym1 = Symbol();

var sym2 = Symbol("foo");

var sym3 = Symbol("foo");

Symbol("foo") === Symbol("foo"); // false O_o

26

Тип 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

Тип SymbolСимволы не приватные!

Симовол уникален , но не приватен , т.к он может быть получен в

результате рефлексии через метод

Object.getOwnPropertySymbols

28

Спецификация 23.1 - 23.4

Cтруктурыданных

Map и SetУпрощают работу со специфичными типами коллекций. Map позволяет

определять коллекции наборов в формате ключ/значение. В качестве

ключа и значения могут выступать любые выражения JavaScript. По

аналогии Set позволяет задать множество любых выражений

JavaScript

30

Maplet 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

Setlet 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

WeakSet и WeakMapТо же самое, но безопасно , т.е не заботимся об утечках памяти!

Объект удаляется, если на него больше не осталось ссылок, кроме

ссылки из текущей коллекции, что позволяет не беспокоиться об

утечках памяти.

33

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

Cтруктуры данныхИтог

• Map — коллекция записей вида ключ: значение. Допускает любые

ключи.

• Set — коллекция уникальных элементов, также допускает любые

ключи.

• WeakMap и WeakSet — «урезанные» варианты Map/Set. Не

коллекции. Ключи только Object. Если ссылка на объект осталась

только в WeakMap/WeakSet — объект удаляется.

35

For-of

For-ofКак 20 лет назад...

for (var index = 0; index < myArray.length; index++) {

console.log(myArray[index]);

}

37

For-ofКак в ES5

myArray. forEach (function (value) {

console.log(value);

});

38

For-ofА как насчет For-in?

for (var index in myArray) {

console.log(myArray[index]);

}

но так делать не стоит...

• строковая арифметика (index - строка)

• проходит по expando-свойствам и свойствам из цепочки прототипов

• проход в случайном порядке! О_о

39

For-ofНас спасет!

for (var index of myArray) {

console.log(myArray[index]);

}

Выглядит неплохо

• самый лаконичный и наглядный синтаксис

• нет недостатков for-in

• в отличие от forEach(), он работает с break, continue и return

40

For-ofИтог

• for-in нужен для перебора свойств объекта.

• for-of нужен для перебора данных, например, значений массива

• for-of также хорошо работает с большинством массивоподобных

объектов, вроде списков NodeList в DOM

• Работает с объектами Map и Set

• Работает со строками, рассматривая строку как набор символов

Unicode

41

Спецификация 25.2

Генераторы

ГенераторыГенератор - позволяет организовать эффективное выполнение

функций в асинхронном режиме.

43

Генераторы

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

Итератор:

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

Генераторы

for (var value of range(10, 1000) ) {

console.log(value);

}

46

ГенераторыГде применить возможность генераторов вести себя как итераторы?

• Преобразование любого объекта в итерируемый

• Упрощение функций, создающих массивы

• Результаты необычной длины

• Рефакторинг сложных циклов

• Утилиты для работы с итерируемыми объектами

47

ГенераторыГенератор это

• Итератор, а итератор — это новый стандарт для данных и циклов во

всём ES6

• Попытка избежать спагетти кода в асинхронном коде. К примеру

Q.async() - это экспериментальная попытка сделать асинхронный код

похожим на синхронный при помощи генераторов и промисов

48

Спецификация 25.4

Promise

PromiseПредназначен для получения значений в асинхронном режиме.

Позволяет определить значение, которое пока неизвестно, но будут

определено через какое-то время

50

Promise};

})

});

});

});

});

Это боль...

51

Promisenew Promise ( resolve , reject ) {

if (testSomething) {

resolve (resValue);

} else {

reject (errValue);

});

52

PromiserequestFromServer()

.then(function(res) {return res2;})

.then(function(res2) {return res3;})

...

.then(function(res3) {return res4;})

Так лучше!

53

Спецификация 14.5

Классы

Классыclass Animal {

constructor() {

this.speed = 0;

}

toString() {

return this.speed === 0 ? ' sleep' : ' play'

}

}

55

Классыextends

class Cat extends Animal {

constructor() {

super();

this.speed = 10;

}

}

56

Классы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

Классыstatic

class Util {

static inc(x) {return x + 1},

static dec(x) {return x - 1}

}

console.log(Util.inc(5)); // 6

58

Классыget/set

class O {

constructor() {

this.mx = 'initial';

}

get x() { return this.mx; }

set x(val) { this.mx = val; }

}

59

Классы"поднятие"

var a = new ClassA(2); // ReferenceError

class ClassA {

constructor(n) {

this.x = n;

}

}

60

Новые методы базовых объектов• String

• Object

• Array

• Number

• Math

61

Новые методы базовых объектовObject.is(0, -0); // false

Object.is(NaN, NaN) // true !

0 === -0; // true

NaN === NaN; // false

Использует SameValue(x, y) алгоритм

62

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

Хочуиспользовать уже

сейчас!

Как использовать новые возможностиES2015 уже сейчас?

• chrome://flags/ -> Включить

• в io.js или Node достаточно включить флаг --harmony

• использовать транспайлеры es6-tools

66

Что умеет Babel?• Поддержка новых фич и синтаксиса ES2015(ES6)

• Поддержка новых фич и синтаксиса ES2016(ES7)

• Транспайлинг некоторых фич напрямую в ES5

• Поддержка некоторых фич через полифилы

• Поддерживается пока не все (в частности Proxy)

68

Что дальше?

Будущее Javascript• Транспайлинг - не только как переходный этап

• Как только браузер начнет поддерживать новую фичу, отключаем ее

транспайлинг

70

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

Ссылки• Официальная спецификация ES 2015

• Exploring ES6: Upgrade to the next version of JavaScript

• es6-features.org

• Цикл статей ES6 In Depth

• Frontender Magazine

72

Спасибо!

Вопросы?