ecmascript 6 — будущее javascript

Новые методы базовых объектов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 = 'alena@serenity.su';

let profile = {'name': name, 'email': email};

Странные конструкцииObject literal property value shorthand

google traceur

let name = 'Alena';let email = 'alena@serenity.su';

let profile = {'name': name, 'email': email};

let profile = {name, email};

// {"name": "Alena", "email": "alena@serenity.su"}

Странные конструкции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);}

// 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