Сегодняшний урок был посвящен изучению ES6.
Первой концепцией был оператор Let
Let —оператор let позволяет области блока объявлять локальную переменную. Это отличается от ключевого слова var, которое объявляет переменную глобально или локально в области действия функции.
Разница между ними в том, что вы не можете снова использовать ключевое слово let. Он вернет ошибку
var greeting = 'hello'; greeting; // 'hello' var greeting = 'Hi'; greeting; // 'Hi'; //whereas you cant do that with let let greeting = 'hello'; greeting; // 'hello' let greeting = 'hello'; greeting; // error
Самая большая разница между var и let заключается в области видимости. Пусть использует область действия блока, поскольку переменные находят свою область действия в блоке кода, в котором они объявлены. Использование var приведет к тому, что переменная найдет свою область действия внутри функции, в которой она была создана.
var a = 4;
if(true) {
var b = 5;
}
console.log(a*b); // this will return 20 as var is global
// while if we replaced var with let the following would happen
var a = 4;
if(true) {
let b = 5;
}
//will return an error as b is not defined
Использование оператора let должно сделать код более осмысленным и, надеюсь, сделать код менее глючным.
Еще один хороший пример, который мы рассмотрели, чтобы показать различные результаты, которые вы можете получить с помощью var и let, выглядит следующим образом:
function varTest() {
var x = 1;
if(true) {
var x = 2;
console.log(x);
}
console.log(x);
}
varTest():
// Will return 2 & 2
//if you replace var with let so it looks like the below
function letTest() {
let x = 1;
if(true) {
let x = 2;
console.log(x);
}
console.log(x);
}
letTest(); // will return 2 & 1
Второй оператор console.log в операторе let не имеет доступа к x внутри оператора if из-за оператора let, поэтому он возвращает 1.
Далее идет оператор const
Const —объявление cons создаст значение, которое нельзя изменить, это ссылка только для чтения. Он может быть глобальным или локальным для функции или блока, в котором он объявлен, поскольку вы не можете изменить назначенную ему ссылку или литерал.
Наиболее уместно использовать const, когда вы не хотите, чтобы значение изменялось. Примером является
var API_KEY = 'abcdefghijk'; var API_KEY = 'lmnopqrstuv'; // this will change the variable to the below string while const will not const API_KEY = 'abcdefghijk'; API_KEY = 'lmnopqrstuv'; // this will return an ERROR const API_KEY = 'lmnopqrstuv'; // this will return an ERROR
Лучше всего использовать const, когда вам нужна большая стабильность в переменной.
Литералы шаблона —литералы шаблона заключаются в обратную кавычку. Они заменяют одинарные или двойные кавычки, обычно используемые в строках. Они могут содержать заполнители. Заполнители обозначаются знаком доллара и фигурными скобками. Выражения в заполнителях, включая текст, содержащийся между ними, передаются функции. Части объединяются функцией по умолчанию в одну строку.
Примером шаблонного литерала из ES6 является изменение следующего:
//ES5 in order to put a new line in you would do the following var sentence = 'My name is Rob/n and I like to run.'; sentence;// 'My name is Rob and I like to run'. //ES6 it would look like this let sentence = `My name is Rob and I like to run`; sentence;// 'My name is Rob and I like to run'.
Это также может упростить вещь следующим образом
//ES5
var topping1 = 'pepperoni';
var topping2 = 'mushrooms';
var pizzaToppings =
'My favourite pizza has ' + topping1 + ' and ' + topping2 + '!';
pizzaToppings;//
'My favourite pizza has pepperoni and mushrooms!'
//To make it easier to read and less hassle trying to determine the correct spacings etc it is best to do it like the following
ES6
let topping1 = 'pepperoni';
let topping2 = 'mushrooms';
let pizzaToppings = `My favourite pizza has ${topping1} and ${topping2}!`;
pizzaToppings;//
'My favourite pizza has pepperoni and mushrooms!'
' и пробелы заменены на ${}
Еще один способ упростить вещи:
//For ES5
var pizza = {
topping1: 'pepperoni',
topping2: 'mushrooms',
favouritePizza: function() {
return 'My favourite pizza has ' + this.topping1 + 'and ' + this.topping2 + '!';
}
}
pizza.favouritePizza();//
'My favourite pizza has pepperoni and mushrooms!'
//For ES6
var pizza = {
topping1: 'pepperoni',
topping2: 'mushrooms',
favouritePizza: function() {
return `My favourite pizza has ${topping1} and ${topping2}!`;
}
}
pizza.favouritePizza();//
'My favourite pizza has pepperoni and mushrooms!'
Опять же, это устраняет необходимость конкатенации и определения интервалов, что упрощает
Я уже вижу, что в ES6 есть несколько новых функций, которые упрощают чтение и написание кода.
Есть еще две функции, которые охватывают функции Arrow и Spread Operator, но я думаю, что сегодня я перегрузил свой мозг достаточным количеством новых вещей, поэтому я приберегу их на завтра. Я мог бы попытаться найти время завтра днем, если я смогу уложить обоих детей спать одновременно (сны бесплатны)
