Что нового в ES6

Основное обновление ES6 (ES2015) для стандарта сценариев было предложено членами комитета ECMA в 2016 году. ES5 уже широко внедрен в большинстве современных браузеров. Некоторые выделенные новые функции обсуждаются ниже.

Хотя ES6 все еще находится на ранних стадиях внедрения, требуется использовать транспилятор, такой как Babel (популярный), для написания эффективного обратно совместимого кода javascript, который преобразует ES6 в ES5, понятный устаревшим браузерам (IE 11).

Const

Константа, которую нельзя изменить после назначения.

Старый

var isES6 = false
isES6 = true
console.log(isES6) 
//true

Новый

const isES6 = true
isES6 = false
console.log(isES6) 
// Uncaught TypeError : Assignment to constant variable

Позволять

Переменная с областью видимости блока, то есть она доступна только в том блоке, в котором она объявлена.

Старый

var topic = ‘javascript’
if(topic) {
 var topic = ‘react’
 console.log(‘block’,topic)
 // block react
}
console.log(‘global’,topic); 
// global react

Новый

var topic = ‘javascript’
if(topic) {
 let topic = ‘react’
 console.log(‘block’,topic)
 // block react
}
console.log(‘global’,topic); 
// global javascript

Строки шаблона

Это простой способ объединить строки, а также вставить в них переменную. Он учитывает пробелы, шаблон многострочной строки.

Старый

var firstName = ‘Piyush’
var lastName = ‘Johnson’
console.log(firstName + ‘ ‘ + lastName);
// Piyush Johnson

Новый

var firstName = ‘Piyush’
var lastName = ‘Johnson’
console.log(`${firstName} ${lastName}`);
// Piyush Johnson

Параметр по умолчанию

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

Старый

function logActivity(name,activity) {
 console.log(`${name} did ${activity}`)
}
logActivity()
// “undefined did undefined”

Новый

function logActivity(name=’Guest’,activity=’general’) {
 console.log(`${name} did ${activity}`)
}
logActivity()
// Guest did general

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

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

Старый

var fruits = {
 print: function(delay=1000)=> {
         setTimeout(() => {
         console.log(this === window)
        }, delay)
 }
}
fruits.print()
// true

Новый

var fruits = {
 print: (delay=1000)=> {
         setTimeout(() => {
         console.log(this === window)
        }, delay)
 }
}
fruits.print()
// false

Стрелочная функция всегда связывается с непосредственным верхним контекстом, который во втором случае является оконным объектом.

Разрушение присвоения

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

Старый

function greeting(person) {
 console.log(`Hello, {person.firstName}`)
}
greeting({‘Piyush’,’Johnson’})
// Hello Piyush

Новый

function greeting({firstName}) {
 console.log(`Hello, {firstName}`)
}
greeting({‘Piyush’,’Johnson’})
// Hello Piyush Johnson

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

Улучшение литерала объекта

Это наоборот - разрушение, то есть реструктуризация переменных в объект javascript, превращение глобальных переменных в объекты.

Старый

function createPerson(name,age) {
 return {name: name,age: age};
}
var p = createPerson(‘Piyush’,20);
console.log(p)
// {name: ‘Piyush’,age: 20}

Новый

function createPerson(name,age) {
 return {name,age};
}
var p = createPerson(‘Piyush’,20);
console.log(p)
// {name: ‘Piyush’,age: 20}

Оператор распространения

Это сокращенный синтаксис для сопоставления значений от исходного объекта к целевому без изменения исходного объекта.

Старый

var fruits = [“Orange”, “Apple”, “Guava”]
var more = [“Mango”, “Blackberry”]
var all = fruits.concat(more)
var [last] = all.reverse();
console.log(last)
// Orange
console.log(all)
// Blackberry, Mango, Guava, Apple, Orange

Новый

var fruits = [“Orange”, “Apple”, “Guava”]
var more = [“Mango”, “Blackberry”]
var all = […fruits,…more]
var [last] = [..all].reverse();
console.log(last)
// Orange
console.log(all)
// Blackberry, Mango, Guava, Apple, Orange

В основном он используется для мошенничества, копирования или извлечения некоторых / всех значений без изменения исходного.

Классы

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

Старый

// works as constructor
function Person(name,age) {
 this.name = name
 this.age = age
}
// as method of object
Person.prototype.sayHello() {
 console.log(‘Hello from ‘ + this.name)
}
var p = new Person(‘Piyush’,20)
p.sayHello()

Новый

Class Person {
 constructor(name,age) {
  this.name = name
  this.age = age
 }
 
 sayHello() {
  console.log(‘Hello from ‘ + this.name)
 }
}
var p = new Person(‘Piyush’,20)
p.sayHello();