Что особенного в важной версии ECMAScript?
ES6 привносит в язык JavaScript еще больше удивительных функций.
Итак, без лишних слов, давайте сразу же посмотрим, что это такое и как они могут помочь вам писать код более эффективно.
1. Остальные параметры
Взгляните на встроенную функцию в JavaScript:
Math.max(arg1, arg2, …, argN)
Вы можете вызвать эту функцию с любым количеством аргументов. Нравиться:
let max1 = Math.max(3, 5, 5, 1); // 5 let max2 = Math.max(23, 1, 56, 23, 13, 67); // 67
Используя функцию остальных параметров ES6, вы можете определять такие функции, как Math.max.
Вот как:
function averageOf(…numbers) {
let sum = 0;
for (let number of numbers) {
sum += number;
}
return sum / numbers.length;
}
let average = averageOf(5, 6, 2, 1); // 3.5
Вот так три точки (…) помогают создавать специальные функции.
2. Обещания
Обещания позволяют отложить дальнейшие задачи до тех пор, пока не будут выполнены другие предыдущие задачи. Это полезно, когда вам нужно иметь дело с последовательностью отложенных действий, или асинхронных задач. Обычный вариант использования - вызов API.
До появления обещаний мы использовали обратные вызовы. Теперь у нас есть гораздо лучший вариант. Пришло время отказаться от обратных звонков и перейти к обещаниям. Почему?
Никто не любит ад обратных звонков. Чем больше действий мы откладываем, тем больше будет ад. Он мог бы стать таким уродливым мальчиком:
processStep1(id, function(data1) {
processStep2(data1, function(data2) {
processStep3(data2, function(data3) {
processStep4(data3, function(data4) {
finish(data4);
});
});
});
});
А обещания сделают мальчика красивым, выстроив естественную цепочку действий вроде:
proccessStep1(id)
.then(function(data1) {
return processStep2(data1);
})
.then(function(data2) {
return processStep3(data2);
})
.then(function(data3) {
return processStep4(data3);
})
.then(function(data4) {
finish(data4);
})
.catch(errorHandler);
Теперь код выглядит красивее. Вы можете видеть, что здесь происходит. Все связано в логическом порядке. Но это не все.
Вы можете сделать его еще лучше, объединив со стрелками:
proccessStep1(id) .then(data1 => processStep2(data1)) .then(data2 => processStep3(data2)) .then(data3 => processStep4(data3)) .then(data4 => finish(data4)) .catch(errorHandler);
Понимаете, больше нет причин для обратных звонков.
3. Стрелочные функции
В настоящее время почти современные языки программирования, как правило, упрощают способ написания кода, но при этом выполняют те же задачи. Это одна из задач стрелочных функций в JavaScript.
Жизнь до того, как стрелочные функции будут такими:
function sayHello(name) {
console.log(‘Hello ‘ + name);
}
sayHello(‘Amy’); // Hello Amy
И вот как это развивается сейчас:
const sayHello = name => console.log(‘Hello ‘ + name); sayHello(‘Amy’); // Hello Amy
Оба примера дают один и тот же результат, но мне больше нравится синтаксис второго.
4. Шаблонные литералы
Литералы шаблона - это строковые литералы, которые можно разбить на несколько строк и использовать с интерполированными выражениями ($ {…}).
Вы используете пару одинарных кавычек (‘) или двойных кавычек (“), чтобы объявить традиционную строку. Литералы шаблона создаются с помощью обратных кавычек (`).
Пример:
const bookTitle = ‘JavaScript’;
console.log(`This ${bookTitle} book is great.
I learned so much from it.`);
// This JavaScript book is great
// I learned so much from it.
5. const & let
До ES6 можно было объявлять переменные с помощью ключевого слова var. Однако с этим у нас возникают проблемы, связанные с объемом.
var не имеет области действия блока, поэтому может привести к непредсказуемому поведению.
Пример:
var name = ‘Amy’;
if (true) {
var name = ‘James’;
}
console.log(name); // James
Вы можете не увидеть проблему в простом примере выше. Но в больших проектах, когда вы работаете с сотнями строк кода, вы, вероятно, не знаете, что переменная name уже определена ранее. Затем вы определяете ту же переменную в области действия оператора if. К сожалению, это действие приводит к изменению значения одного в глобальной области без вашего ведома.
Вот почему вам следует выбрать let и const.
С помощью let область действия блокируется, что означает, что все, что происходит в блоке, остается в блоке. Давайте заменим var на let в приведенном выше примере, чтобы увидеть, как все работает:
let name = ‘Amy’;
if (true) {
let name = ‘James’;
}
console.log(name); // Amy
Как видите, все в порядке, если вы случайно определите то же имя переменной, что и глобальное имя. Несмотря на одно и то же название, но к ним относятся по-разному, поскольку они имеют разную область применения.
const похож на let с точки зрения области блокировки. Мы используем const для постоянных значений. После определения переменной с помощью const ее нельзя будет обновить.
const PI = 3.14; PI = 3; // error: Uncaught TypeError: Assignment to constant variable.
Чтобы избежать проблем с областью видимости, используйте let или const вместо var.
6. Параметры по умолчанию
Параметры по умолчанию в JavaScript позволяют инициализировать параметры значениями по умолчанию, если вы не передаете в функции ничего или неопределенные значения.
Если вы не передаете аргументы при вызове функции, ее параметры по умолчанию не будут определены:
const welcome = name => console.log(‘Welcome ‘ + name); welcome(); // Welcome undefined
Без функции параметров по умолчанию, если вы хотите использовать значение по умолчанию для параметра name, вы часто делаете следующее:
const welcome = name => {
name = name || ‘Amy’;
console.log(‘Welcome ‘ + name);
};
welcome(); // Welcome Amy
А затем ES6 вводит функцию параметров по умолчанию, все становится намного лучше:
const welcome = (name = ‘Amy’) => console.log(‘Welcome ‘ + name); welcome(); // Welcome Amy
Это так просто, но эффективно, правда?
7. Модули
Когда вы разрабатываете свою кодовую базу, вы должны разделить ее на разные части, каждая из которых имеет собственное назначение. В JavaScript эти части называются модулями.
Вы можете увидеть модуль в JavaScript как файл, который группирует связанные вещи для повторного использования и организации.
Возьмем, к примеру, calculate.js:
export const moduleName = ‘Calculation’;
export function sum(a, b) {
return a + b;
}
Мы используем ключевое слово export для экспорта переменной и функции. Затем вы можете получить доступ к экспортированным переменным и функциям в другом файле с помощью ключевого слова import.
Пример:
import { moduleName, sum } from ‘./calculation.js’;
console.log(moduleName); // Calculation
let a = sum(5, 8); // 13
8. Классы
До ES6 не было такого понятия, как класс. Мы придумали обходной путь, который использует функции как классы.
function Person(name) {
this.name = name;
}
Person.prototype.introduce = function () {
console.log(`My name is ${this.name}`);
}
let person = new Person(‘Amy’);
person.introduce(); // My name is Amy
Теперь вам больше не нужно так работать:
class Person {
constructor(name) {
this.name = name;
}
introduce() {
console.log(`My name is ${this.name}`);
}
}
let person = new Person(‘Amy’);
person.introduce(); // My name is Amy
Если вы знакомы с такими языками программирования, как C # или Java, вы должны быть довольны этой новой функцией ES6, поскольку она обеспечивает более четкий и удобный синтаксис.
9. Разрушение
Эта функция позволяет нам извлекать определенные части объектов или массивов и назначать их переменным.
Пример:
let book = {
title: ‘JavaScript’,
price: 13,
author: ‘Amy’
};
let { title, author } = book;
console.log(title, author); // JavaScript Amy
Помимо базового использования, деструктуризация раскрывает свои возможности, если используется в конкретных случаях использования, которые вы можете найти в статье ниже:
Заключение
Это не все функции ES6, а только те, которые я считаю интересными и наиболее полезными для меня. Некоторые из них - просто сахарный синтаксис, некоторые действительно меняют правила игры.
Какие твои любимые? Пожалуйста, дайте мне знать в комментарии ниже.
Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал на YouTube в Decoded!
