ecma script 6 in action
DESCRIPTION
Ecma script 6 in actionTRANSCRIPT
![Page 1: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/1.jpg)
EcmaScript 6 in actionЧто JS новый нам готовит
Юрий Трухин)cloud computing expert @infoboxcloud
[email protected] twitter.com/trukhinyuri
![Page 2: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/2.jpg)
Обо мне• В InfoboxCloud с 2013 года
• Отвечаю за счастье гиков в облаках
• Думаю о будущем и воплощаю его
• Адвокат пользователей
• Пишу код и рассказываю об этом
![Page 3: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/3.jpg)
Многое в вебе улучшалось в последнее время…
![Page 4: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/4.jpg)
Многое в вебе улучшалось в последнее время…
но не основа EcmaScript
![Page 5: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/5.jpg)
Наступает счастье EcmaScript 6
![Page 6: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/6.jpg)
Наступает счастье EcmaScript 6релиз стандарта запланирован на конец 2014
![Page 7: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/7.jpg)
Что такое Harmony?Набор идей, не вошедших в EcmaScript 5 (3.1)
Цель:сложные приложения
переход к тестируемой спецификации
адаптация стандартов дефакто где возможно
сохранение версионирования простым
поддержка статической типизации где необходимо
библиотеки
кодогенераторы
![Page 8: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/8.jpg)
Предложенияулучшения функций
генераторы и итераторы
модульность
улучшения api
полная поддержка UTF-16
scoping binding, callingколлекции
![Page 9: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/9.jpg)
arrow functions =>Стрелочные функции обеспечивают лексическое связывание. this, super и arguments определяются не тем, как функции были вызваны, а тем - как были созданы. !this, super и arguments не изменяются на протяжении всего цикла жизни функции. !Стрелочные функции не могут быть использованы как конструктор - при использовании new будет ошибка. !Собственное значение arguments недоступно.
![Page 10: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/10.jpg)
arrow functions =>var fun = (x) => x;
Синтаксис
Объявление всегда начинается со списка аргументов, далее стрелка и тело функции.1 параметрvar result = value => value; var result = function (value) { return value; };Скобки не обязательны. В теле функции фигурные скобки и return не обязательны.несколько параметровvar sum = (arg1, arg2) => arg1 + arg2; var sum = function (arg1, arg2) { return arg1 + arg2; };
![Page 11: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/11.jpg)
arrow functions =>Синтаксис
без парамеровvar sum = () => 1 + 2; var sum = function () { return 1 + 2; };
Если тело функции содержит более одного выражения - нужно использовать.
традиционный синтаксисvar sum = (arg1, arg2) => { return arg1 + arg2; }; var sum = function (arg1, arg2) { return 1 + 2; };
![Page 12: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/12.jpg)
arrow functions =>
var item = id => ({ id: id, name: “Name”}); var item = function(id) {return {id: id, name: “Name”} };
Если тело функции не содержит фигурных скобок и просто возвращает литерал объекта - должно быть в круглых скобках.
переменное число параметров
var item = (…rest) => rest; var item = function () { return [].slice.apply(arguments) };
литерал объекта
используем rest паттерн из шаблонов деструктуризации
для любых шаблонов деструктуризации как единственного параметра функции наличие круглых скобок обязательно
![Page 13: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/13.jpg)
Function to String conversion
Если вызван Function.prototype.toString.call(fn), to eval по результату должен вызвать ту же функцию в том же лексическом контексте: !- должны сработать биндинги к переменным в этом scope !- если исполняется внутри use strict; – может быть нарушена строгость оригинального контекста.
![Page 14: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/14.jpg)
Function Name property
У каждой функции есть свойство name типа String.
Автоматически выводит имена для синтезированных функций (get, set, bind).
Позволяет штатно изменять имя функции.
Свойство name не поменяет Function.prototype.toString();
![Page 15: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/15.jpg)
Block scoping bindings
let, const, block functions разрешаются для всей программы, тела функции или блока. Разница с ES5 Strict mode – не позволял определение в блоке.
let – новый var, но с block scopeconst – неизменяемый letblock functions – функции в let
![Page 16: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/16.jpg)
DestructingПозволяет деструктурировать данные при присваивании.
Перемена мест[a, b] = [b, a]
function f() { return [1,2]; } var a,b; [a, b] = f();
Действует только слева от =.
Возврат нескольких значений из функции
Игнорирование некоторых значений при возвратеfunction f() { return [1,2,3]; } var [a, , b] = f();
![Page 17: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/17.jpg)
DestructingПогружение в массив[a,,[b,,[c]]] = f();Деструктуризация объектаvar {op: a, lhs: b, rhs: c} = getASTNode();Погружение в объектvar {op: a, lhs: {op: b}, rhs: c} = getASTNode();Цикл по объектуfor (let [name, value] in obj) print (name, value);Цикл по значениям в объектеfor each ( let { name: n, family: {father: f} } in obj) print (n, f)
![Page 18: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/18.jpg)
DestructingПогружение в массив[a,,[b,,[c]]] = f();Деструктуризация объектаvar {op: a, lhs: b, rhs: c} = getASTNode();Погружение в объектvar {op: a, lhs: {op: b}, rhs: c} = getASTNode();Цикл по объектуfor (let [name, value] in obj) print (name, value);Цикл по значениям в объектеfor each ( let { name: n, family: {father: f} } in obj) print (n, f)
![Page 19: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/19.jpg)
Destructing refutable patterns
Несоответствие паттерну вызывает исключениеlet ?[x, y, z] = [1, 2] //x =1, y = 2, z = undefined
let {?a: x} = {} // x = undefinedlet {a: x} = {} // throw
![Page 20: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/20.jpg)
Parameter default values
Возможность использования опциональных параметров без проверки их задания.
function add (x = 0, y = 0) { return x + y; };
![Page 21: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/21.jpg)
Rest parameters
Возможность передавать различное количество параметров, позволяя определять устаревшие и т.д.
function simpleApply (func, …args) { return func.apply(undefined, args); };
![Page 22: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/22.jpg)
Rest parameters
Возможность передавать различное количество параметров, позволяя определять устаревшие и т.д.
function simpleApply (func, …args) { return func.apply(undefined, args); };
![Page 23: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/23.jpg)
Direct Proxies
Конструирование proxy объекта:var proxy = Proxy(target, handler);target и handler – Objects.
Объект, для которого разработчик должен определить свое поведение.
var p = Proxy.create({ get: function (proxy, name) { return “Hello”, name; } }); document.write (p.World);
handler – обработчик мета уровня. name – прототип прокси-объекта.
Proxy.createFunction (handler, call, construct);
![Page 24: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/24.jpg)
Generators: yieldВычисляют следующее значение функции только при обращении к нему.
Бесконечные потоки
function* fibonacci () { var a = 0, b = 1, c = 0; while (true) { yield a; c = a; a = b; b = c + b; } } !function run() { var seq = fibonacci(); console.log(seq.next().value); //0 console.log(seq.next().value); //1 }
![Page 25: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/25.jpg)
Modulesmodule A { export function fa() {…} export function fb(i) {…} } !A.fa(); import A.*; fb(5); !Возможность разработки изолированных модулей. Поддерживается загрузка из внешнего пути. Финальная семантика еще не определена.
![Page 26: Ecma script 6 in action](https://reader031.vdocuments.pub/reader031/viewer/2022020207/549e741bb379597b4b8b45aa/html5/thumbnails/26.jpg)
Это далеко не все, что войдет в EcmaScript 6, но готовиться нужно уже сейчас!
Вопросы?Проверить поддержку EcmaScript 6:
http://kangax.github.io/es5-compat-table/es6/
Google Traceur Compiler https://github.com/google/traceur-compiler
[email protected] Пишите мне по любым вопросам!