ES6

JavaScript развивается. Новые добавления в язык называются ECMAScript 6. Или ES6 или ES2015+.

Все современные браузеры и среды исполнения уже поддерживают ES6.

В ES6 перешли от var к let/const. Используйте const для всех референсов; не используйте var. Если референсы нужно переопределять, используйте let вместо const.

Template Literals

Не нужно больше делать вложенную конкатенацию, можно использовать шаблоны с помощью апострофа и интерполяции строк ${}.


ES5
var first = 'Adrian';
var last = 'Mejia';
console.log('Your name is ' + first + ' ' + last + '.');

ES6
const first = 'Adrian';
const last = 'Mejia';
console.log(`Your name is ${first} ${last}.`);

Destructuring Assignment

Получение элемента из массива


ES5
var array = [1, 2, 3, 4];

var first = array[0];
var third = array[2];

console.log(first, third); // 1 3

То же самое:


ES6
const array = [1, 2, 3, 4];

const [first, ,third] = array;

console.log(first, third); // 1 3

Обмен значениями


ES5
var a = 1;
var b = 2;

var tmp = a;
a = b;
b = tmp;

console.log(a, b); // 2 1

То же самое:


ES6
let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a, b); // 2 1

Классы и конструкторы

Код стал лаконичнее.


ES6
class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

const animal = new Animal('animal');
animal.speak(); // animal makes a noise.

Наследование


ES6
class Lion extends Animal {
  speak() {
    super.speak();
    console.log(this.name + ' roars ');
  }
}

const lion = new Lion('Simba');
lion.speak(); // Simba makes a noise.
// Simba roars.

Значения по умолчанию в функциях

Можно сразу указать значение по умолчанию в параметрах функции.


function hello(name='Kitty') {
  console.log(`Hello ${name}!`);
}

Вы можете вызвать функцию без аргументов и тогда подставится значение по умолчанию. Либо вы указываете нужное значение.

Параметры по умолчанию всегда должны указываться после параметров без значений по умолчанию, если функция содержит несколько параметров.

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

Появился новый синтаксис для объявления функций при помощи символов =>. Слева от стрелки находятся параметры, справа тело блока функции. Стрелочные функции всегда анонимны, поэтому их нужно присваивать переменной. Допустим, нам нужна функция возведения в квадрат.


const square = x => x * x;

Если используется только один параметр, то круглые скобки можно опустить. Если код умещается в одну строчку, то тело блока не требуется.

Если используются два параметра, то скобки нужны.


const add = (x,y) => x + y;

Если вообще нет параметров, то используются пустые круглые скобки.


const hello = () => alert('Hello Kitty!');

Во всех примерах тело функции состояло из одной строчки. Рассмотрим примеры со сложным кодом.


const tax = (salary) => {
    const taxable = salary - 8000;
    const lowerRate = 0.25 * taxable;
    taxable = taxable - 20000;
    const higherRate = 0.4 * taxable;
    return lowerRate + higherRate;
}

Другие примеры.


// this will reference the outer one
$('.btn').click((event) =>  this.sendData());

// implicit returns
const ids = [291, 288, 984];
const messages = ids.map(value => `ID is ${value}`);

For…of

От for переходим к forEach а потом к for...of:


ES5
// for
var array = ['a', 'b', 'c', 'd'];
for (var i = 0; i < array.length; i++) {
  var element = array[i];
  console.log(element);
}

// forEach
array.forEach(function (element) {
  console.log(element);
});

ES6 for…of позволяет использовать итераторы


ES6
// for ...of
const array = ['a', 'b', 'c', 'd'];
for (const element of array) {
    console.log(element);
}

Оператор spread (...). Еще один перевод этой же статьи.

Обзор ES6

ES6