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.

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


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

Реклама