EcmaScript 6 in action
Что JS новый нам готовит
Юрий Трухин)
cloud computing expert @infoboxcloud
trukhinyuri@infoboxcloud...
Обо мне
• В InfoboxCloud с 2013 года
• Отвечаю за счастье гиков в
облаках
• Думаю о будущем и
воплощаю его
• Адвокат польз...
Многое в вебе улучшалось в последнее
время…
Многое в вебе улучшалось в последнее
время…
но не основа EcmaScript
Наступает счастье EcmaScript 6
Наступает счастье EcmaScript 6
релиз стандарта запланирован на конец 2014
Что такое Harmony?
Набор идей, не вошедших в EcmaScript 5 (3.1)
Цель:
сложные приложения
переход к тестируемой спецификаци...
Предложения
улучшения функций
генераторы и итераторы
модульность
улучшения api
полная поддержка UTF-16
scoping binding, ca...
arrow functions =>
Стрелочные функции обеспечивают лексическое
связывание. this, super и arguments определяются не тем,
ка...
arrow functions =>
var fun = (x) => x;
Синтаксис
Объявление всегда начинается со списка аргументов, далее
стрелка и тело ф...
arrow functions =>
Синтаксис
без парамеров
var sum = () => 1 + 2;
var sum = function () { return 1 + 2; };
Если тело функц...
arrow functions =>
var item = id => ({ id: id, name: “Name”});
var item = function(id) {return {id: id, name: “Name”} };
Е...
Function to String
conversion
Если вызван Function.prototype.toString.call(fn), to eval по
результату должен вызвать ту же...
Function Name property
У каждой функции есть свойство name типа String.
Автоматически выводит имена для синтезированных
фу...
Block scoping bindings
let, const, block functions разрешаются для всей
программы, тела функции или блока. Разница с ES5 S...
Destructing
Позволяет деструктурировать данные при присваивании.
Перемена мест
[a, b] = [b, a]
function f() { return [1,2]...
Destructing
Погружение в массив
[a,,[b,,[c]]] = f();
Деструктуризация объекта
var {op: a, lhs: b, rhs: c} = getASTNode();
...
Destructing
Погружение в массив
[a,,[b,,[c]]] = f();
Деструктуризация объекта
var {op: a, lhs: b, rhs: c} = getASTNode();
...
Destructing refutable
patterns
Несоответствие паттерну вызывает исключение
let ?[x, y, z] = [1, 2] //x =1, y = 2, z = unde...
Parameter default values
Возможность использования опциональных параметров без
проверки их задания.
function add (x = 0, y...
Rest parameters
Возможность передавать различное количество
параметров, позволяя определять устаревшие и т.д.
function sim...
Rest parameters
Возможность передавать различное количество
параметров, позволяя определять устаревшие и т.д.
function sim...
Direct Proxies
Конструирование proxy объекта:
var proxy = Proxy(target, handler);
target и handler – Objects.
Объект, для ...
Generators: yield
Вычисляют следующее значение функции только при
обращении к нему.
Бесконечные потоки
function* fibonacci ...
Modules
module A {
export function fa() {…}
export function fb(i) {…}
}
!
A.fa();
import A.*;
fb(5);
!
Возможность разрабо...
Это далеко не все, что войдет в EcmaScript 6,
но готовиться нужно уже сейчас!
Вопросы?
Проверить поддержку EcmaScript 6:
h...
Upcoming SlideShare
Loading in …5
×

Ecma script 6 in action

552 views
331 views

Published on

Ecma script 6 in action

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
552
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Ecma script 6 in action

  1. 1. EcmaScript 6 in action Что JS новый нам готовит Юрий Трухин) cloud computing expert @infoboxcloud trukhinyuri@infoboxcloud.com twitter.com/trukhinyuri
  2. 2. Обо мне • В InfoboxCloud с 2013 года • Отвечаю за счастье гиков в облаках • Думаю о будущем и воплощаю его • Адвокат пользователей • Пишу код и рассказываю об этом
  3. 3. Многое в вебе улучшалось в последнее время…
  4. 4. Многое в вебе улучшалось в последнее время… но не основа EcmaScript
  5. 5. Наступает счастье EcmaScript 6
  6. 6. Наступает счастье EcmaScript 6 релиз стандарта запланирован на конец 2014
  7. 7. Что такое Harmony? Набор идей, не вошедших в EcmaScript 5 (3.1) Цель: сложные приложения переход к тестируемой спецификации адаптация стандартов дефакто где возможно сохранение версионирования простым поддержка статической типизации где необходимо библиотеки кодогенераторы
  8. 8. Предложения улучшения функций генераторы и итераторы модульность улучшения api полная поддержка UTF-16 scoping binding, callingколлекции
  9. 9. arrow functions => Стрелочные функции обеспечивают лексическое связывание. this, super и arguments определяются не тем, как функции были вызваны, а тем - как были созданы. ! this, super и arguments не изменяются на протяжении всего цикла жизни функции. ! Стрелочные функции не могут быть использованы как конструктор - при использовании new будет ошибка. ! Собственное значение arguments недоступно.
  10. 10. 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; };
  11. 11. 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; };
  12. 12. 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 паттерн из шаблонов деструктуризации для любых шаблонов деструктуризации как единственного параметра функции наличие круглых скобок обязательно
  13. 13. Function to String conversion Если вызван Function.prototype.toString.call(fn), to eval по результату должен вызвать ту же функцию в том же лексическом контексте: ! - должны сработать биндинги к переменным в этом scope ! - если исполняется внутри use strict; – может быть нарушена строгость оригинального контекста.
  14. 14. Function Name property У каждой функции есть свойство name типа String. Автоматически выводит имена для синтезированных функций (get, set, bind). Позволяет штатно изменять имя функции. Свойство name не поменяет Function.prototype.toString();
  15. 15. Block scoping bindings let, const, block functions разрешаются для всей программы, тела функции или блока. Разница с ES5 Strict mode – не позволял определение в блоке. let – новый var, но с block scope const – неизменяемый let block functions – функции в let
  16. 16. 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();
  17. 17. 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)
  18. 18. 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)
  19. 19. Destructing refutable patterns Несоответствие паттерну вызывает исключение let ?[x, y, z] = [1, 2] //x =1, y = 2, z = undefined let {?a: x} = {} // x = undefined let {a: x} = {} // throw
  20. 20. Parameter default values Возможность использования опциональных параметров без проверки их задания. function add (x = 0, y = 0) { return x + y; };
  21. 21. Rest parameters Возможность передавать различное количество параметров, позволяя определять устаревшие и т.д. function simpleApply (func, …args) { return func.apply(undefined, args); };
  22. 22. Rest parameters Возможность передавать различное количество параметров, позволяя определять устаревшие и т.д. function simpleApply (func, …args) { return func.apply(undefined, args); };
  23. 23. 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);
  24. 24. 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 }
  25. 25. Modules module A { export function fa() {…} export function fb(i) {…} } ! A.fa(); import A.*; fb(5); ! Возможность разработки изолированных модулей. Поддерживается загрузка из внешнего пути. Финальная семантика еще не определена.
  26. 26. Это далеко не все, что войдет в EcmaScript 6, но готовиться нужно уже сейчас! Вопросы? Проверить поддержку EcmaScript 6: http://kangax.github.io/es5-compat-table/es6/ Google Traceur Compiler https://github.com/google/traceur-compiler trukhinyuri@infoboxcloud.com Пишите мне по любым вопросам!

×