автор rishabhgupta · Опубликовано 18 мая 2018 г. · Обновлено 31 мая 2018 г.

Javascript постоянно развивается, и с ES6 появились новые способы делать вещи, которые не только делают Javascript более современным, но и устраняют проблемы, которые сохранялись в предыдущих версиях. Вот 10 синтаксических изменений в ES6, о которых должен знать каждый разработчик Javascript.

#1 Let, Const и область видимости блока

let — это новое ключевое слово, используемое для объявления новых переменных и заменяющее var в ES6. Разница между ними в том, что let не требует подъема.

'use strict';
// using var, cipherhack will be hoisted
console.log(cipherhack);
var cipherhack = 1;
//OUTPUT: undefined

// using let, cipherhack2 will not be hoisted
console.log(cipherhack2);
let cipherhack2 = 2;
//OUTPUT: ReferenceError: cipherhack2 is not defined

//using let and assigning
let cipherhack3 = 3;
console.log(cipherhack3);
//OUTPUT: 3

//using let and not assigning
let cipherhack3;
console.log(cipherhack3);
//OUTPUT: undefined

const, как следует из названия, используется для объявления констант, переменных, значения которых нельзя изменить.

'use strict'
const CONTROL_GROUP;
// Uncaught SyntaxError: Missing initializer in const declaration

const CONTROL_GROUP = 10;
CONTROL_GROUP = 100;
console.log(CONTROL_GROUP);
// Uncaught TypeError: Assignment to constant variable.

Block Scope – это еще одно нововведение, которое позволяет нам создавать области, просто используя фигурные скобки {}, т. е. когда переменная, объявленная внутри {}, становится ее областью действия, нам больше не нужно зависеть от функциональных областей.

let cipherhack = 100;
if (cipherhack > 0) {
  let cipherhack = 10;
}
console.log(cipherhack);
// OUTPUT: 100

const cipherhack2 = 100;
if (cipherhack2 > 0){
  const cipherhack2 = 2;
}
console.log(cipherhack2);
// OUTPUT 100

#2 Функции стрелок

Стрелочное обозначение — это сокращенное представление объявления функций. Основной шаблон

var‹functionName› =(‹arg1›,‹arg2› ….) =› { ‹functionCode› ;}.

В случае, если они не являются аргументами функции

var‹имя_функции› =() =› { ‹Код_функции›;}.

var add =  (val1, val2) => val1 + val2;

// Translates to
var add = function(val1, val2){
  return val1 + val2;
}

Есть несколько важных аспектов стрелочных функций, которые выделяются среди обычных функций E65:

  1. this указывает не на объект, в котором находится стрелочная функция, но указывает на контекст ее выполнения.
  2. Использование call(), apply() и bind()для изменения this функции стрелкине работает.
  3. В отличие от обычных функций, стрелочные функции не имеют прототипа.

#3 Параметры функции по умолчанию

В ES5, если мы не указали параметр, его значение будет установлено в undefined. ES6 меняет это и дает нам возможность указать значение по умолчанию.

var addTax = function (price, tax = price * 0.2){
  console.log(price + tax);
}

addTax(100); // OUTPUT: 120
addTax(100, 30); // OUTPUT: 130

# 4 Отдых и распространение

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

var getProduct = function (product, ...companies){
  console.log(companies);
  console.log(companies instanceOf Array);
}

getProducts('Mobile', "Apple", "Samsung")
// OUTPUT: ["Apple", "Samsung"]
// OUTPUT: true
getProducts('Mobile')
// OUTPUT: []
// OUTPUT: true

Распространение, с другой стороны, относится к распределению различных элементов массива или строки. Это прямо противоположно отдыху.

var ages = [12,3,43,80];
var oldest = Math.max(...ages);
console.log(oldest);
// OUTPUT: 80

var chars = ["A", ..."BCD", "E"]
console.log(chars);
// OUTPUT: ["A","B","C","D","E"]

№ 5. Литеральные расширения объекта

ES6 упрощает создание объектов, предоставляя несколько сокращений. Например, мы можем отказаться от значения в {key: value}, если оно уже определено. Ниже приведен допустимый синтаксис javascript.

var firstname = 'Cipher';
var lastname = 'Hack';
var obj = {
  firstname,
  lastname
}

console.log(obj)
//OUPUT
{firstname: 'Cipher', lastname: 'Hack'}

Это помогает объявлять объекты со многими полями, так как сокращает код и делает его более читабельным. Мы также можем объявлять функции, используя тот же шаблон.

var firstname = 'Cipher';
var lastname = 'Hack';
var obj = {
  firstname,
  lastname,
  log(){
    console.log(this.firstname + " " + this.lastname);
  }
}

console.log(obj.log());
//OUPUT: Cipher Hack

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

ES6 также позволяет нам создавать объекты с динамическими ключами, например

var dynamicKey = 'dKey';
var value = 'Cipherhack';
var obj = {
  [dynamicKey + '-01']:value
}
console.log(obj);
// OUPUT: {dKey-01: "Cipherhack"}

Читать всю статью здесь