Основные функции JavaScript следующего поколения: ES6 и ES7
В настоящее время языки программирования развиваются очень быстро, с огромным количеством добавленных новых, «отличающихся на вид» функций. Для нас, как разработчиков, важно изучить эти функции, поскольку они позволяют нам делать более мощные вещи.
Излишне говорить, что JavaScript является одним из лидеров в этой эволюции. Иногда JS вообще выглядит как новый язык из-за того, как быстро он развивается, и из-за функций следующего поколения, которые он использует. Для нас важно понимать эти функции, поскольку они позволяют нам писать надежный и чистый код.
Вот основные функции JavaScript следующего поколения в ES6 и ES7.
let и const (пока, пока, var)
var - это способ создать переменную в JavaScript. Даже для создания константы мы используем var в старой версии JS.
ES6 представил два ключевых слова: let и const. (... var по-прежнему работает нормально, но настоятельно рекомендуется использовать let и const ...)
let и const имеют область уровня блока, а var - область уровня функции.
Проблема с var : Этот пример покажет, почему вам следует использовать let not var.
function print() {
var a = 10;
if (true) {
var a = 20;
}
console.log(a); // this prints 20( not expected)
}
В приведенном выше коде вы можете обнаружить, что когда переменная обновляется внутри цикла if, значение переменной «a» глобально сохраняется на 20, а не на 10.
Следовательно, мы должны быть очень осторожны при использовании этой функции, потому что есть возможность переопределить существующее значение.
Однако, когда мы используем функцию let (как показано ниже), значение «a» не переопределяется вне блока.
function print() {
let a = 10;
if (true) {
let a = 20;
}
console.log(a); // this prints 10( block level scope)
}
Функция стрелки
Это способ создания функции в более короткой форме, плюс он также решит проблемы, которые возникают у вас с ключевым словом this.
Иногда ключевое слово this не относится к тому, что вы ожидали при написании кода.
Однако, когда вы пишете this внутри функции стрелки, она всегда сохраняет свой контекст. Нет никаких неожиданных изменений в контексте this во время выполнения. (См. здесь)
arrow function может показаться немного странным, но на самом деле это просто и помогает быстрее создавать функции. Вот пример:
Старый способ написания функции:
let print = function (name) {
console.log(name);
}
Новый способ написания функции:
let print = (name) => {
console.log(name);
}
//it further can be condensed, if u have only one argument
let print = name => {
console.log(name);
}
Если ваша функция возвращает только какое-то значение и ничего больше, вы можете использовать только однострочную функцию. Например,
let multiply = (number) => {
return number*2;
}
// you can omit curly braces and return keyword
let multiply = (number) => number*2;
экспорт и импорт
Идея import и export заключается в том, что внутри любого файла JS мы можем импортировать другие файлы JS, чтобы файлы знали свою зависимость.
Вы должны использовать ключевое слово export, чтобы сделать функциональность доступной для внешнего файла.
Есть два типа экспорта; export default и named export. Вот пример:
Оператор распространения и отдыха
На самом деле это всего лишь один оператор ..., который действует как spread или rest в зависимости от того, как мы его используем. Оператор распространения позволяет извлекать элементы массива или свойства объекта.
Вот пример с массивом:
const oldArray = [1, 2, 3]; const newArray = [...oldArray, 4, 5] // now [1, 2, 3, 4, 5]
А вот пример с объектом:
const oldObject={ name: 'Max'};
const newObject={...oldObject, age: 28 }; // {name: 'Max', age: 28}
Оператор распространения очень полезен для клонирования и копирования массива или объекта.
Поскольку оба относятся к ссылочному типу, их безопасное копирование может быть сложной задачей. С оператором распространения вы можете легко копировать или клонировать объект и массив.
Оператор Rest: используется для объединения списка аргументов функции в массив. Вот синтаксис оператора отдыха:
function sortArgs(...args) {
return args.sort();
}
Как видите, мы используем оператор rest для аргументов функции. В приведенном выше коде sortArgs получает неограниченное количество аргументов, и все аргументы будут объединены в массив. Вы можете удобно применить любую функцию массива в этом сохраненном массиве.
Деструктуризация массива и объекта
Это позволяет нам легко извлекать элементы массива или свойства объекта и сохранять их в переменной. Это может звучать так же, как оператор распространения, но это другое слово.
Spread извлекает все элементы массива или все свойства объекта и распределяет их в новом массиве или объекте.
С другой стороны, Destructuring позволяет извлекать отдельный элемент или свойство отдельного объекта и сохранять их в переменных.
//array destructuring
[a, b] = [6, 8]
console.log(a); // 6
console.log(b); // 8
//Object destructuring
{name} = {name: "Max", age: 25};
console.log(name); // max.
Деструктуризация очень полезна при работе с аргументами функции. Рассмотрим этот пример:
const printName = (personObj) => {
console.log(personObj.name);
}
printName({name: 'Max', age: 28});//prints'Max'
Здесь мы хотим только напечатать имя в функции, но мы передаем в функцию полный объект person.
Конечно, это не создаст проблем как таковых, но заставит нас без надобности вызывать personObj.name.
С деструктуризацией мы можем сжать этот код внутри нашей функции следующим образом:
const printName = ({name}) => {
console.log(name);
}
printName({name: 'Max', age: 28});//prints'Max')
Как видите, мы получаем тот же результат, что и раньше, но нам не нужно вызывать personObj.name.
Путем деструктуризации мы просто извлекаем свойство и сохраняем его в имени переменной / аргумента, которое затем можем использовать в теле функции.
