Обзор es2015(es6)
TRANSCRIPT
Обзор ES2015(ES6)
Александр Филатовgreybax
Фронтенд разработчик в Akvelon(vendor в Microsoft)
1
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
Шаблоны строк"В 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
МодулиЭкспорт
// calculator/lib/calc.js
let notExported = 'abc';
export function square(x) {
return x * x;
}
export const MY_CONSTANT = 123;
16
МодулиИмпорт
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
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
Тип 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
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Как 20 лет назад...
for (var index = 0; index < myArray.length; index++) {
console.log(myArray[index]);
}
37
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
ГенераторыГенератор - позволяет организовать эффективное выполнение
функций в асинхронном режиме.
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
ГенераторыГде применить возможность генераторов вести себя как итераторы?
• Преобразование любого объекта в итерируемый
• Упрощение функций, создающих массивы
• Результаты необычной длины
• Рефакторинг сложных циклов
• Утилиты для работы с итерируемыми объектами
47
ГенераторыГенератор это
• Итератор, а итератор — это новый стандарт для данных и циклов во
всём ES6
• Попытка избежать спагетти кода в асинхронном коде. К примеру
Q.async() - это экспериментальная попытка сделать асинхронный код
похожим на синхронный при помощи генераторов и промисов
48
PromiseПредназначен для получения значений в асинхронном режиме.
Позволяет определить значение, которое пока неизвестно, но будут
определено через какое-то время
50
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
Классыclass Animal {
constructor() {
this.speed = 0;
}
toString() {
return this.speed === 0 ? ' sleep' : ' play'
}
}
55
Классы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
Новые методы базовых объектов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