автор 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:
- this указывает не на объект, в котором находится стрелочная функция, но указывает на контекст ее выполнения.
- Использование call(), apply() и bind()для изменения this функции стрелкине работает.
- В отличие от обычных функций, стрелочные функции не имеют прототипа.
#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"}
Читать всю статью здесь