Date post: | 16-Jun-2015 |
Category: |
Technology |
Upload: | armen-kandilyan |
View: | 548 times |
Download: | 2 times |
Алексей Симоненкотехнический директор Serenity
Будущее JavaScript
2013
Раньше
Сейчас
12 лет между последними большими изменениями спецификации JavaScript
12 лет между последними большими изменениями спецификации JavaScript
Новые методы базовых объектов
ObjectStringArrayNumberMath
Новые методы базовых объектовString
String.fromCodePoint
String.prototype.containsString.prototype.startsWithString.prototype.endsWithString.prototype.repeatString.prototype.codePointAtString.prototype.toArray
Новые методы базовых объектовString
'too much'.contains('too');// true
'too much'.startsWith('t');// true
'too much'.endsWith('t');// false
18
es6-shim
ECMAScript-6
Новые методы базовых объектовObject
Object.isObject.assignObject.mixinObject.getOwnPropertyDescriptorsObject.getPropertyDescriptorObject.getPropertyNamesObject.setPrototypeOf
Новые методы базовых объектовObject
Object.is(NaN, NaN);// true
23
19
15
es6-shim
ECMAScript-6
Новые методы базовых объектовObject
Object.assign({a: 1, b: 3}, {b: 2, c: 3});// {a: 1, b: 2, c: 3}
Object.is(NaN, NaN);// true
23
19
15
es6-shim
ECMAScript-6
Новые методы базовых объектовArray
Array.fromArray.of
Array.prototype.findArray.prototype.findIndexArray.prototype.fill
Новые методы базовых объектовArray
[1, 3, 15, 7, 15, 23].find(function(item) { return item / 3 === 5;});
// 15
[1, 3, 15, 7, 15, 23].findIndex(function(item) { return item / 3 === 5;});
// 2
25
30
es6-shim
Новые методы базовых объектовArray
Нет метода Array.prototype.unique()
Новые методы базовых объектовNumber
Number.isNaNNumber.isFiniteNumber.isIntegerNumber.toInteger
Number.prototype.clz
Новые методы базовых объектовMath
Math.signMath.imulMath.log1pMath.log2Math.log10Math.expm1Math.froundMath.hypot
Math.truncMath.coshMath.sinhMath.tanhMath.acoshMath.asinhMath.atanh
Область видимости
Область видимостиlet
var tag = '#wstdays';
if (true) { let tag = '#404fest';}
11
18
24
google traceur
es6ify
Область видимостиlet
var tag = '#wstdays';
if (true) { let tag = '#404fest'; console.log(tag); // "#404fest"}
console.log(tag); // "#wstdays"
11
18
24
google traceur
es6ify
Область видимостиconst
const a = 10;
11
18
24
12
6
google traceur
Область видимостиconst
const a = 10;
a = 15;// SyntaxError: Assignment to constant variable.
11
18
24
12
6
google traceur
Область видимостиconst
const a = 10;
a = 15;// SyntaxError: Assignment to constant variable.
var a = 15;// SyntaxError: Variable 'a' has already been declared
11
18
24
12
6
google traceur
Область видимостиconst
var a = 15;
if (true) { const a = 10; console.log(a); // 10}
console.log(a); // 15
18
11
24
12
6
google traceur
Коллекции
КоллекцииMap
let data = new Map();
data.set('key', 100);data.set(666, true);data.set(undefined, 'some text');
11
18
29
es6-shim
ECMAScript-6
harmony-collections
КоллекцииMap
let data = new Map();
data.set('key', 100);data.set(666, true);data.set(undefined, 'some text');
let fn = function() { console.log('inside?'); }data.set(fn, 'function key');
11
18
29
es6-shim
ECMAScript-6
harmony-collections
КоллекцииMap
let data = new Map();
data.set('key', 100);data.set(666, true);data.set(undefined, 'some text');
let fn = function() { console.log('inside?'); }data.set(fn, 'function key');
data.has('keys'); // falsedata.has(undefined); // true
11
18
29
es6-shim
ECMAScript-6
harmony-collections
КоллекцииMap
let data = new Map();
data.set('key', 100);data.set(666, true);data.set(undefined, 'some text');
let fn = function() { console.log('inside?'); }data.set(fn, 'function key');
data.has('keys'); // falsedata.has(undefined); // true
data.delete(undefined);data.has(undefined); // false
11
18
29
es6-shim
ECMAScript-6
harmony-collections
КоллекцииMap
let data = new Map();
data.set('key', 100);data.set(666, true);data.set(undefined, 'some text');
let fn = function() { console.log('inside?'); }data.set(fn, 'function key');
data.has('keys'); // falsedata.has(undefined); // true
data.delete(undefined);data.has(undefined); // false
data.get(fn); // "function key"
11
18
29
es6-shim
ECMAScript-6
harmony-collections
КоллекцииSet
let data = new Set([1, 3, 5, 3]);
11
24
29
es6-shim
ECMAScript-6
harmony-collections
КоллекцииSet
let data = new Set([1, 3, 5, 3]);
data.add(3);data.add(7);
11
24
29
es6-shim
ECMAScript-6
harmony-collections
КоллекцииSet
let data = new Set([1, 3, 5, 3]);
data.add(3);data.add(7);
data.has(3); // truedata.has(9); // false
11
24
29
es6-shim
ECMAScript-6
harmony-collections
КоллекцииSet
let data = new Set([1, 3, 5, 3]);
data.add(3);data.add(7);
data.has(3); // truedata.has(9); // false
data.delete(3);data.has(3); // false
11
24
29
es6-shim
ECMAScript-6
harmony-collections
Коллекцииfor-of
let tags = ['#404fest', '#wstdays', '#dconf'];
for (let tag in tags) { console.log(tag);}
// 0, 1, 2
13
google traceur
es6ify
Коллекцииfor-of
let tags = ['#404fest', '#wstdays', '#dconf'];
for (let tag in tags) { console.log(tag);}
// 0, 1, 2
for (let tag of tags) { console.log(tag);}
// "#404fest", "#wstdays", "#dconf"
13
google traceur
es6ify
Коллекцииfor-of
let tags = new Set([ '#404fest', '#wstdays', '#404fest', '#dconf']);
for (let tag of tags) { console.log(tag);}
// "#404fest", "#wstdays", "#dconf"
24
google traceur
es6ify
Коллекцииfor-of
let data = new Map();
data.set('404fest', {'involve': true, 'speaker': true});data.set('wstdays', {'involve': false, 'speaker': false});data.set('dconf', {'involve': true, 'speaker': false});
for (let conf of data) { console.log(conf);}
// ["404fest", {"involve": true, "speaker": true}]// ["wstdays", {"involve": false, "speaker": false}]// ["dconf", {"involve": true, "speaker": false}]
18
google traceur
es6ify
КоллекцииWeakMap
let data = new WeakMap();let element = document.querySelector('footer');
data.set(element, 'some text');
11
23
29
harmony-collections
КоллекцииWeakMap
let data = new WeakMap();let element = document.querySelector('footer');
data.set(element, 'some text');
data.has(element); // truedata.get(element); // "some text"
11
23
29
harmony-collections
КоллекцииWeakMap
let data = new WeakMap();let element = document.querySelector('footer');
data.set(element, 'some text');
data.has(element); // truedata.get(element); // "some text"
element = null;data.has(element); // false
11
23
29
harmony-collections
Странные конструкции
let data = [10, 20, 30];let [a, b, c] = data;
// a = 10, b = 20, c = 30
Странные конструкцииDestructuring assignment 12
google traceur
es6ify
let data = [10, 20, 30];let [a, b, c] = data;
// a = 10, b = 20, c = 30
let a = 10;let b = 20;
[a, b] = [b, a];
// a = 20, b = 10
Странные конструкцииDestructuring assignment 12
google traceur
es6ify
let [a, [[b], c]] = [10, [[20], 30]];
// a = 10, b = 20, c = 30
Странные конструкцииDestructuring assignment 12
google traceur
es6ify
let [a, [[b], c]] = [10, [[20], 30]];
// a = 10, b = 20, c = 30
[, month, day, year] = Date().split(' ');
// month = "Oct", day = "13", year = "2013"
Странные конструкцииDestructuring assignment 12
google traceur
es6ify
let data = {a: 10, b: 20, c: 30};let {a, b, c} = data;
// a = 10, b = 20, c = 30
Странные конструкцииDestructuring assignment 12
google traceur
es6ify
let data = {a: 10, b: 20, c: 30};let {a, b, c} = data;
// a = 10, b = 20, c = 30
let {parse, stringify} = JSON;
Странные конструкцииDestructuring assignment 12
google traceur
es6ify
function today() { return { d: 13, m: 9, y: 2013 };}
let {m: month, y: year} = today();
// month = 9, year = 2013
Странные конструкцииDestructuring assignment 12
google traceur
es6ify
let name = 'Alena';let email = '[email protected]';
let profile = {'name': name, 'email': email};
Странные конструкцииObject literal property value shorthand
google traceur
let name = 'Alena';let email = '[email protected]';
let profile = {'name': name, 'email': email};
let profile = {name, email};
// {"name": "Alena", "email": "[email protected]"}
Странные конструкцииObject literal property value shorthand
google traceur
let data = new Map();
data.set('404fest', {'involve': true, 'speaker': true});data.set('wstdays', {'involve': false, 'speaker': false});data.set('dconf', {'involve': true, 'speaker': false});
for (let [name, {involve}] of data) { console.log(name, involve);}
// "404fest", true// "wstdays", false// "dconf", true
Странные конструкции
let params = [2013, 9, 13, 15, 30];let date = new Date(...params);
// Sun Oct 13 2013 15:30:00 GMT+0400 (MSK)
Странные конструкцииSpread operator 16
google traceur
es6ify
let params = [2013, 9, 13, 15, 30];let date = new Date(...params);
// Sun Oct 13 2013 15:30:00 GMT+0400 (MSK)
let speak = ['#404fest', '#dconf'];let tags = ['#fronteers13', ...speak, '#wstdays'];
// ["#fronteers13", "#404fest", "#dconf", "#wstdays"]
Странные конструкцииSpread operator 16
google traceur
es6ify
function elastic(key, ...items) { console.log(items);}
elastic('tags', '#404fest', '#dconf', '#wstdays');
// ["#404fest", "#dconf", "#wstdays"]
Странные конструкцииRest parameter 16
google traceur
es6ify
Странные конструкции
Нет метода Array.prototype.unique()?
Сделаем его сами
let data = [ 10, 20, 10, 35, 'S', 'Y', 'S', 35, 10, 'S'];
let unique = [...new Set(data)];
// [10, 20, 35, "S", "Y"]
Странные конструкции
Функции
6 000 000 °
ФункцииDefault argument
function fn(a, b = false, c = 'world') { console.log(a, b, c);}
fn(10);// a = 10, b = false, c = "world"
16
google traceur
es6ify
ФункцииDefault argument
function fn(a, b = false, c = 'world') { console.log(a, b, c);}
fn(10);// a = 10, b = false, c = "world"
fn(10, 'world', null);// a = 10, b = "world", c = null
16
google traceur
es6ify
ФункцииDefault argument
function fn(a, b = false, c = 'world') { console.log(a, b, c);}
fn(10);// a = 10, b = false, c = "world"
fn(10, 'world', undefined);// a = 10, b = "world", c = "world"
fn(10, 'world', null);// a = 10, b = "world", c = null
16
google traceur
es6ify
ФункцииDefault argument
function fn(that = this) { setTimeout(function() { console.log(that); }, 100);}
16
google traceur
es6ify
ФункцииArrow function
[1, 3, 15, 7, 15, 23].find(function(item) { return item / 3 === 5;});
23
es6ify
harmonizr
ФункцииArrow function
[1, 3, 15, 7, 15, 23].find(item => item / 3 === 5);
[1, 3, 15, 7, 15, 23].find(function(item) { return item / 3 === 5;});
23
es6ify
harmonizr
ФункцииArrow function
[1, 3, 15, 7, 15, 23].find(item => { let test = item / 3; return test === 5;});
[1, 3, 15, 7, 15, 23].find(item => item / 3 === 5);
[1, 3, 15, 7, 15, 23].find(function(item) { return item / 3 === 5;});
23
es6ify
harmonizr
Генераторы
Генераторы
function* compute(degree, max) { var a = 1;
for (let i = 0; i < max; i++) { yield a; a = a * degree; }}
let gen = compute(2, 3);
26
29
google traceur
es6ify
Генераторы
function* compute(degree, max) { var a = 1;
for (let i = 0; i < max; i++) { yield a; a = a * degree; }}
let gen = compute(2, 3);
gen.next(); // { value: 1, done: false }gen.next(); // { value: 2, done: false }gen.next(); // { value: 4, done: false }
26
29
google traceur
es6ify
Генераторы
function* compute(degree, max) { var a = 1;
for (let i = 0; i < max; i++) { yield a; a = a * degree; }}
let gen = compute(2, 3);
gen.next(); // { value: 1, done: false }gen.next(); // { value: 2, done: false }gen.next(); // { value: 4, done: false }
gen.next(); // { value: undefined, done: true }
26
29
google traceur
es6ify
Генераторы
function* compute(degree, max) { var a = 1;
for (let i = 0; i < max; i++) { yield a; a = a * degree; }}
for (let degree of compute(2, 5)) { console.log(degree);}
26
29
google traceur
es6ify
Генераторы
function* compute(degree, max) { var a = 1;
for (let i = 0; i < max; i++) { yield a; a = a * degree; }}
for (let degree of compute(2, 5)) { console.log(degree);}
// 1, 2, 4, 8, 16
26
29
google traceur
es6ify
Генераторы
function* seq(a) { yield a + 5;
let b = yield null; return a + b;}
let gen = seq(5);
26
29
google traceur
es6ify
Генераторы
function* seq(a) { yield a + 5;
let b = yield null; return a + b;}
let gen = seq(5);
gen.next().value; // 10
26
29
google traceur
es6ify
Генераторы
function* seq(a) { yield a + 5;
let b = yield null; return a + b;}
let gen = seq(5);
gen.next().value; // 10
gen.next().value; // null
26
29
google traceur
es6ify
Генераторы
function* seq(a) { yield a + 5;
let b = yield null; return a + b;}
let gen = seq(5);
gen.next().value; // 10
gen.next().value; // null
gen.next(8).value; // 13
26
29
google traceur
es6ify
Классы
Классы
class Employee { constructor(title) { this.title = title; }
who() { console.log(this.title); }}
google traceur
es6ify
harmonizr
Классы
class Employee { constructor(title) { this.title = title; }
who() { console.log(this.title); }}
let ryan = new Employee('Райан Стоун');ryan.who();
// Райан Стоун
google traceur
es6ify
harmonizr
Классы
class Chief extends Employee { constructor(firstname, surname, role) { super(firstname + ' ' + surname); this.role = role; }
fire(person) { person.dismiss(); }}
google traceur
es6ify
harmonizr
Классы
class Chief extends Employee { constructor(firstname, surname, role) { super(firstname + ' ' + surname); this.role = role; }
fire(person) { person.dismiss(); }}
let mat = new Chief('Мэтт', 'Ковальски', 'owner');mat.who();
// Мэтт Ковальски
google traceur
es6ify
harmonizr
Ответственный за поддержку стандартов
Ответственный за поддержку стандартов
letconstMapSet
WeakMap
simonenko simonenko simonenko.su
Спасибо.