ES.next

Лекция 06

ECMAScript

  • ES3 - 1999
  • ES5 - 2009
  • ES6 - 2015
  • годовой цикл
  • Babel

Деструктуризация

var {foo} = pony

var foo = pony.foo

Деструктуризация

var {foo: baz} = pony

var baz = pony.foo

Деструктуризация

var {foo='baz'} = pony

var foo = pony.foo
if (!foo) foo = 'baz'

Деструктуризация

var {foo, bar: baz} = pony

var foo = pony.foo,
    bar = pony.baz;

Деструктуризация

var {foo: {bar}} = pony

var bar = pony.foo.bar

Деструктуризация

var [a, b] = [0, 1]
// a = 0, b = 1

Деструктуризация

var [a, , b] = [0, 1, 2]
// a = 0, b = 2

Деструктуризация

function foo ({ a, b=2 }) {}

foo({ a: 3, b: 3 })

Оператор расширения для массивов

fn(...[1, 2, 3])

fn(1, 2, 3)

Оператор расширения для массивов

[1, 2, ...[3, 4, 5], 6, 7]

Оператор расширения для объектов

var x = { a: 2, b: 3 };
var y = { c: 4, ...x };
var z = { ...y, a: 5 };

Оператор расширения для объектов

var x = { a: 2, b: 3, c: 4 };
var { a, ...y } = x;

// a = 3
// y = { b: 3, c: 4 }

Оставшиеся параметры

function foo (...everything) {}

Оставшиеся параметры

function foo (bar, ...rest) {}

Стрелочные функции

[1, 2].map (x => x * 2)

Стрелочные функции

p1 => expr
p1 => { return expr; }
p1 => ({ foo: 'bar' })

Стрелочные функции

(  )     => expr
(p1)     => expr
 p1      => expr
(p1, p2) => expr

Стрелочные функции

function Person() {
  this.age = 0;

  setInterval(function () {
    this.age++;
  }, 1000);
}

var p = new Person();

Стрелочные функции

function Person() {
  var self = this;

  this.age = 0;

  setInterval(function () {
    self.age++;
  }, 1000);
}

var p = new Person();

Стрелочные функции

function Person() {
  this.age = 0;

  setInterval(()=> {
    this.age++;
  }, 1000);
}

var p = new Person();

Литералы шаблонов

var rating = 5;

`ponyfoo.com is ${rating}`
`ponyfoo.com is ${2 * 3}`
`ponyfoo.com is ${foo()}`

Литералы шаблонов

function fn(template, ...expressions) {
/*
  template = [
    'foo, ',
    ' and ',
    ''
  ]

  expressions = [
    bar,
    baz
  ]
*/
}

fn`foo, ${bar} and ${baz}`

Литералы объектов

{ foo }

{ foo: foo }

Литералы объектов

var prefix = 'moz'

var obj = { [prefix + 'Foo'] : 'bar' }

Литералы объектов

{
  foo () {}
}

{
  foo: function () {}
}

let, const

if (...) {
  var a = 5;
}

console.log(a); // 5

let, const

if (...) {
  let a = 5;
}

console.log(a); // ReferenceError

let, const

const a = { foo: 42 };

a = { bar: 9000 }; // TypeError

let, const

const a = { foo: 42 };

a.foo = 9000;
a.bar = 9000;

Оператор возведения в степень

x ** y

Math.pow(x, y)

Object.assign

const a = { a: 1 }, b = { b: 2 };

const c = Object.assign({}, a, b);

// { a: 1, b: 2}

Object.assign

const a = { a: 1 }, b = { b: 2 };

const c = Object.assign({}, a, b);

// { a: 1, b: 2}

Object.keys

const a = { a: 1, b: 2 }

const keys = Object.keys(a);

// ['a', 'b']

Object.entries

Object.entries({ one: 1, two: 2 })

// [ [ 'one', 1 ], [ 'two', 2 ] ]

Висящие запятые

let obj = {
    first: 'Jane',
    last: 'Doe',
};

Висящие запятые

let arr = [
  'red',
  'green',
  'blue',
];

Висящие запятые

function foo(
  param1,
  param2,
) {}

Висящие запятые

foo(
  'abc',
  'def',
);

Асинхронная итерация

for await (const line of readFiles(dirPath)) {
  console.log(line);
}

Promise.prototype.finally()