Автор оригинала: FreeCodeCamp Community Member.
Бхуван Малик
ES6 предлагает несколько прохладных новых функций, которые делают программирование в JavaScript гораздо более гибким. Давайте поговорим о некоторых из них – в частности, параметры по умолчанию, параметры отдыха и функции стрелки.
Забавный наконечник : Вы можете скопировать и вставить любой из этих примеров/Code в Бабел ренс И вы можете увидеть, как код ES6 транкирует на ES5.
Значения параметров по умолчанию
Функции JavaScript имеют уникальную функцию, которая позволяет вам передавать любое количество параметров во время вызова функции (фактические параметры) независимо от количества параметров, присутствующих в определении функции (формальные параметры). Таким образом, вам нужно включить параметры по умолчанию, на случай, если кто-то забывает пройти один из параметров.
Как параметры по умолчанию будут реализованы в ES5
Вышесказанное кажется хорошо, когда мы бежим. №2 не было передано, и мы проверили это, используя « «Оператор для возврата второго операнда, если первый является фальсию. Таким образом, «10» был назначен как значение по умолчанию, поскольку №2
Есть только одна проблема. Что если кто-то пройдет «0» как второй аргумент? ⚠.
Приведенный выше подход не удается, потому что наше значение по умолчанию «10» будет назначено вместо прошедшего значения, такого как «0». Почему? Потому что ‘0’ оценивается как falsy!
Давайте улучшим вышеуказанный код, будем ли мы?
Аж! Это слишком много кода. Не круто вообще. Давайте посмотрим, как ES6 делает это.
Параметры по умолчанию в ES6
function counts(number1 = 5, number2 = 10) { // do anything here}№1 и №2 назначаются значения по умолчанию «5» и «10» соответственно. Ну да, это в значительной степени это. Короткий и сладкий. Нет дополнительного кода для проверки отсутствующего параметра. Это делает тело функции приятно и короткоми. ?
Примечание: когда значение undefined пропускается для параметра с аргументом по умолчанию, как ожидалось, пройденное значение Неверный и Значение параметра по умолчанию присваивается Отказ Но если null пропущено, это считается Действительно и Параметр по умолчанию не используется и нуль назначен на этот параметр.
Приятная особенность параметров по умолчанию заключается в том, что параметр по умолчанию не обязательно должен быть примитивным значением, и мы также можем выполнить функцию для получения значения параметра по умолчанию. Вот пример:
Предыдущие параметры также могут быть параметрами по умолчанию для параметров, которые приходят после них, как так:
function multiply(first, second = first) { // do something here}Но обратная ошибка бросит ошибку. То есть, если второй параметр назначен в качестве значения по умолчанию для первого параметра, он приводит к ошибке, поскольку второй параметр еще не определен при назначении первого параметра.
function add(first = second, second) { return first + second;}console.log(add(undefined, 1)); //throws an errorПараметры отдыха
Просто имейте в виду, что может быть только один Отдых Параметр, и это должно быть последним параметром. Мы не можем иметь названный параметр после параметра отдыха. Вот пример:
Как вы можете видеть, мы использовали параметр покоя, чтобы получить все клавиши/свойства, которые будут извлечены из пропущенного объекта, который является первым параметром.
Разница между параметрами отдыха и «объектом аргументов» заключается в том, что последнее содержит все фактические параметры, передаваемые во время вызова функции, в то время как параметр «REST» содержит только параметры, которые не являются названными параметрами и передаются во время вызова функции.
Функции стрелки ➡.
Функции стрелки или «Функции стрелки жира», вводят новый синтаксис для определения функций, которые очень лаконичны. Мы можем избежать ввода ключевых слов, таких как Функция , Возвращение и даже курчавые скобки {} и скобки () Отказ
Синтаксис
Синтаксис поставляется в разных ароматах, в зависимости от нашего использования. Все вариации имеют одну вещь в общий , то есть они начинаются с Аргументы следуют стрелка ( = & gt;), а затем t Он функционирует b оди.
Аргументы и тело могут принимать разные формы. Вот самый основной пример:
let mirror = value => value;
// equivalent to:
let mirror = function(value) { return value;};Приведенный выше пример требует единого аргумента «значение» (до стрелки) и просто возвращает этот аргумент ( => val ue;). Как вы можете увидеть , есть только возвращаемое значение, поэтому нет необходимости в возвращении ключевых слов или вьющихся бюстгальтера CEs, чтобы завернуть функциональный корпус.
Так как есть только Один аргумент , есть Нет необходимости в скобках “( )” также.
Вот пример с более чем одним аргументом, чтобы помочь вам понять это:
let add = (no1, no2) => no1 + no2;
// equivalent to:
let add = function(no1, no2) { return no1 + no2;};Если нет аргументов вообще, вы должны включить пустые скобки, как приведенные ниже:
let getMessage = () => 'Hello World';
// equivalent to:
let getMessage = function() { return 'Hello World';}Для функционального тела с лишь оператором возврата вьющиеся брекеты являются Необязательно Отказ Для функционального тела, имеющего больше, чем просто оператор возврата, вам нужно обернуть тело в фигурных скобках, как и традиционные функции.
Вот простой расчет функции с двумя операциями – добавлять и вычесть. Его тело должно быть завернуто в фигурные скобки:
let calculate = (no1, no2, operation) => { let result; switch (operation) { case 'add': result = no1 + no2; break; case 'subtract': result = no1 - no2; break; } return result;};Теперь, что, если мы хотим функцию, которая просто возвращает объект? Компилятор запутается, являются ли фигурные брекеты объекта ( () = & g t; {ID: NUM B er}) или фигурные скобки функционального тела.
Решение состоит в том, чтобы обернуть объект в скобках. Вот как:
let getTempItem = number => ({ id: number});// effectively equivalent to:
let getTempItem = function(number) { return { id: number };};Давайте посмотрим на окончательный пример. В этом мы будем использовать функцию фильтрации в массиве образца чисел для возврата всех чисел более 5000:
// with arrow functionlet result = sampleArray.filter(element => element > 5000);
// without arrow functionlet result = sampleArray.filter(function(element) { return element > 5000;});Мы можем видеть, насколько нужен код кода по сравнению с традиционными функциями.
Несколько вещей о функциях стрелки, чтобы иметь в виду, хотя:
- Их нельзя вызывать с Новый , нельзя использовать как конструкторы (и, следовательно, не хватает прототипа)
- Функции стрелки имеют свой собственный объем, но нет « » Это « » их собственного.
- Нет Аргументы объект доступен. Вы можно использовать Однако параметры отдыха.
Поскольку JavaScript обрабатывает функции в качестве первого класса, функции стрелки делают написание функционального кода, такими как лямбда выражения и карри намного проще.
Ну, там вы идете! Возможно, пришло время начать использовать эти функции.
Особенности ES6, как будто это дыхание свежего воздуха, а разработчики просто любят их использовать.
Вот …| ссылка На мой предыдущий пост на переменных объявлениях и подъеме! Я надеюсь, что это мотивирует вас взять ES6 Head On, если вы еще не сделали!
Мир ✌️️.