День 5 изучения JavaScript — этап 1
Эта статья написана немного на основе учебника Leanpub — Understanding ES6. Для получения дополнительных объяснений и примеров, не стесняйтесь посетить веб-сайт.
1. Блочные привязки: замените IIFE, используя «let».
Мы можем заменить IIFE и получить тот же результат, объявив let внутри цикла. В блочной привязке для более чистого кода мы можем использовать let вместо var, в отличие от IIFE. Что делает IIFE, так это объявляет переменную цикла как var. Функция for внутри цикла может каждый раз получать и удерживать новую привязку, объявление переменной цикла letfor сделает работу удобной и легкой.
Пример:
переменные числа = [];
для (пусть i = 0; i ‹ 10; i++) {
числа .push (функция () {
console.log(я);
});
}
nums.forEach (функция (число) {
номер(); // выводит 0, затем 1, затем 2, вплоть до 9
})
2. Декларация уровня блока: временная мертвая зона
Подъем позволяет нам получить доступ к переменной до ее объявления. Но, к сожалению, он доступен только для переменной, объявленной как var. Для переменной, объявленной с помощью let или const, подъем запрещен и вызовет ошибку.
Поскольку движок браузера JS помещает объявление во временную мертвую зону или TDZ (для let и const). Если мы хотим получить доступ к переменной в TDZ, это вызовет ошибку времени выполнения. Мы можем обосновать это простой операцией, используя typeOf().
Пример:
if ( — -) {
console.log(тип цвета); // Ошибка ссылки!
пусть цвет = «красный»;
}
3. Значения параметров ES6 по умолчанию влияют на объект arguments
Хотя в ES5 невозможно получить ожидаемый результат arguments без использования строгого режима, ES6 предоставляет волшебное решение, просто используя параметр по умолчанию в функции. Параметр по умолчанию отделяет объект arguments от именованных параметров.
Пример:
функциональный тест (один, два = «b») {
console.log(аргументы.длина); // 1
console.log(один === аргументы [0]); // истинный
console.log(два аргумента ===[1]); // false, arguments[1] не определено
первый = «с»;
секунда = «д»
console.log(первый === аргументы [0]); // ложный
console.log(второй === аргументы[1]); // ложный
}
тест("а");
4. Функции: замена apply() на оператор спреда
Когда нам нужно найти значение из массива из нескольких элементов, поиск по массиву в ES5 был довольно запутанным. В одном из решений использовался метод apply(), но он создает лишний синтаксис и портит первоначальную суть кода. В ES6 мы можем сделать это, просто используя оператор spread (…).
Пример 1 (ES5):
пусть значения = [170, 30, 23, 100];
console.log(Math.max.apply(Math, values)); // 170
Пример 2 (ES6):
пусть значения = [170, 30, 23, 100];
console.log(Math.max(…значения)); // 170
5. Функции блочного уровня ES6 в нестрогом режиме
ES6 также поддерживает подъем объявлений. Но в нестрогом режиме объявления поднимаются в глобальную среду, а не в верхнюю часть блочного уровня.
Пример:
если правда) {
console.log(тест типа); // «функция»
функциональный тест () {
// код тела функции
}
контрольная работа();
}
console.log(тест типа); // «функция»
6. Стрелочные функции и массивы
ES6 предоставляет мощную функцию под названием Arrow function (=›). Он заменяет традиционный длинный функциональный блок и делает код чище. Обработка элементов массива [.., .., ..] с помощью стрелочной функции(=›) намного проще, чем объявление традиционной функции.
Пример 1 (традиционная функция):
пусть значения = [170, 30, 23, 100];
var результат = values.sort (функция (а, б) {
вернуть а - б;
});
результат // [23, 30, 100, 170]
Пример 2 (функция стрелки):
пусть значения = [170, 30, 23, 100];
var result = values.sort((a, b) =› a - b);
результат // [23, 30, 100, 170]
7. Деструктивное присвоение, обмен ценностями
Деструктуризация — это метод разрушения необходимой структуры данных. Используя деструктуру массива, поменять местами значения массива намного проще без какой-либо третьей переменной. Мы можем деструктурировать массив, используя квадратные скобки [] слева от оператора присваивания (=) и переменную массива справа.
Пример 1 (с использованием третьей переменной – ES5):
пусть а = 1, b = 2, темп;
темп = а;
a = b;
б = температура;
console.log(а); // 2
console.log(б); // 1
Пример 2 (с использованием деструктурирования массива — ES6):
пусть а = 1, Ь = 2;
[ a, b ] = [ b, a ];
console.log(а); // 2
console.log(б); // 1
8. «…остальные элементы» упрощают клонирование массива
Невероятно, что клонирование элемента массива настолько проще, чем мы думаем в ES6. До того, как разработчики ES6 использовали метод concat() для клонирования элемента массива, но первоначальная цель функции concat(), определенно не массив клонов. А вот и '... остальные элементы'. Просто назначив массив переменной [… rest items], вы клонируете весь массив без каких-либо ошибок.
Пример:
пусть фрукты = [ "манго", "апельсин", "ананас" ];
пусть [ …clonedFruits ] = фрукты;
console.log(клонированные фрукты); // ["манго", "апельсин", "ананас"]
9. Класс: граждане первого класса ES6
Первоклассные граждане или первоклассные функции в ES6 делают JavaScript уникальным по сравнению с другими языками. Эта уникальная функция обеспечивает ожидаемые значения:
i) передается в функцию,
ii) возвращается из функции, и
iii) присваивается переменной.
Пример:
функциональный тест (демокласс) {
вернуть новый demoClass();
}
пусть x = тест (класс {
скажите что-то() {
console.log("Доброе утро!");
}
});
х.скажи что-нибудь();
10. Класс: свойства доступа
Свойство класса всегда должно формироваться внутри конструктора этого класса. В ES6 разрешено определять свойства доступа в прототипе класса. Класс использует метод геттера и установщика для упрощения доступа к свойству.
Пример:
Метод Object.getOwnPropertyDescriptor() возвращает дескриптор свойства для собственного свойства (ссылка: MDN).
класс CustomHTMLElement {
конструктор (элемент) {
этот.элемент = элемент;
}
получить HTML() {
вернуть this.element.innerHTML;
}
установить HTML (значение) {
this.element.innerHTML = значение;
}
}
дескриптор var = Object.getOwnPropertyDescriptor(CustomHTMLElement.prototype, «html»);
console.log («получить» в дескрипторе); // истинный
console.log («установить» в дескрипторе); // истинный
console.log(дескриптор.enumerable); // ложный
