Вы, наверное, видели функции стрелы, написанные несколько разных способов.
//example 1
const addTwo = (num) => {return num + 2;};
//example 2
const addTwo = (num) => num + 2;
//example 3
const addTwo = num => num + 2;
//example 4
const addTwo = a => {
const newValue = a + 2;
return newValue;
};
У некоторых есть скобки по параметрам, в то время как другие не. Некоторые используют вьющиеся скобки и Возвращение ключевое слово, другие не. Один даже охватывает несколько строк, а остальные состоят из одной линии.
Интересно, что когда мы вызываем вышеуказанные функции стрелки с тем же аргументом, мы получаем тот же результат.
console.log(addTwo(2)); //Result: 4
Откуда вы знаете, какие синтаксис функции arrow используете? Вот что эта статья будет раскроить: как объявить функцию стрелки.
Большая разница
Функции arrow – это еще один краткий способ написания функциональных выражений. Тем не менее, у них нет собственного обязательства с это ключевое слово.
//Function expression
const addNumbers = function(number1, number2) {
return number1 + number2;
};
//Arrow function expression
const addNumbers = (number1, number2) => number1 + number2;
Когда мы вызываем эти функции с теми же аргументами, мы получаем тот же результат.
console.log(addNumbers(1, 2)); //Result: 3
Существует важное синтаксическое значение для примечания: функции стрелки используют стрелку => вместо Функция ключевое слово. Есть и другие различия, если вы пишете функции стрелки, и это то, что мы рассмотрим дальше.
Круглые скобки
Некоторые функции стрелки имеют круглые скобки вокруг параметров, а другие не следует.
//Example with parentheses const addNums = (num1, num2) => num1 + num2; //Example without parentheses const addTwo = num => num + 2;
Как оказывается, количество параметров функция стрелки имеет определяет, нужно ли нам включать скобки.
Функция стрелки с Ноль параметров Требуются скобки.
const hello = () => "hello"; console.log(hello()); //Result: "hello"
Функция стрелки с Один параметр делает не требовать скобки. Другими словами, скобки являются необязательными.
const addTwo = num => num + 2;
Таким образом, мы можем добавлять скобки к вышеуказанному примеру, а функция стрелки все еще работает.
const addTwo = (num) => num + 2; console.log(addTwo(2)); //Result: 4
Функция стрелки с Несколько параметров Требуются скобки.
const addNums = (num1, num2) => num1 + num2; console.log(addNums(1, 2)); //Result: 3
Функции стрелки также поддерживают Параметры отдыха и Разрушение Отказ Обе функции требуют скобок.
Это пример функции стрелки с Параметр отдыха Отказ
const nums = (first, ...rest) => rest; console.log(nums(1, 2, 3, 4)); //Result: [ 2, 3, 4 ]
И вот тот, который использует Разрушение Отказ
const location = {
country: "Greece",
city: "Athens"
};
const travel = ({city}) => city;
console.log(travel(location));
//Result: "Athens"
Подводя итоги: если есть только один параметр, и вы не используете параметры отдыха или разрушительствующие скобки, то скобки являются необязательными. В противном случае обязательно включите их.
Функциональное тело
Теперь, когда мы получили покрытые правила скобок, давайте обратимся к функциональному корпусу функции стрелки.
Функция стрелки может быть либо «Краткое тело» или «Block Body» Отказ Тип кузова влияет на синтаксис.
Во-первых, синтаксис «Краткое тело».
const addTwo = a => a + 2;
Синтаксис «Краткое тело» – это просто: это кратко! Мы не используем Возвращение Ключевое слово или вьющиеся скобки.
Если у вас есть функция стрелки в одну строку (например, пример выше), то значение неявно возвращено. Так что вы можете опустить Возвращение Ключевое слово и вьющиеся скобки.
Теперь давайте посмотрим на синтаксис «Block Body».
const addTwo = a => {
const total = a + 2;
return total;
}
Обратите внимание, что мы используем оба Кудрявые скобки и Возвращение Ключевое слово в приведенном выше примере.
Вы обычно видите этот синтаксис, когда тело функции является более чем одной строкой. И это ключевой момент: оберните тело многострочной функции стрелки в фигурных скобках и используйте Возвращение ключевое слово.
Функции объектов и стрелков
Есть еще один синтаксис нюанса, чтобы узнать о: обернуть тело функции в скобках, когда вы хотите вернуть объект буквальное выражение Отказ
const f = () => ({
city:"Boston"
})
console.log(f().city)
Без скобок мы получаем ошибку.
const f = () => {
city:"Boston"
}
//Result: error
Если вы найдете синтаксис функции стрелки немного запутанно, вы не одиноки. Требуется некоторое время, чтобы познакомиться с ним. Но быть в курсе ваших вариантов и требований – это шаги в этом направлении.
Я пишу об обучении программы и лучшим способам пойти об этом ( amymhaddad.com ).