Что делают квадратные скобки после функции ES6?
Недавно я искал способ переписать уродливый оператор switch/case и наткнулся на эта статья на Медиуме.
Я переписал свой переключатель/кейс в функцию es6 следующим образом:
const url = category => ({
'itemA': itemAService.getItemCategories(payload),
'itemB': itemBService.getItemCategories(payload),
})[category]
Когда я вызываю эту функцию с чем-то вроде const response = url(category);, она работает, и это здорово! Но потом мне стало интересно, что именно означает [category] в конце функции. Я подумал, может быть, это функция с немедленным вызовом, но это тоже не показалось правильным.
В статье упоминается, что это литерал объекта, но когда я зашел в документацию MDN, я не смог найти ничего, что объясняло бы, что это такое или что он делает, или даже каких-либо примеров, демонстрирующих то же самое.
Так что же он делает?
Это просто ключ доступа. Функция возвращает объект, поэтому, по сути, она просто назначает объект, а затем использует нотацию скобок для выбора объекта, переданного в
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Это не "после" функции, это в тело функции. Это также может быть записано как:
const url = category => {
const obj = {
'itemA': itemAService.getItemCategories(payload),
'itemB': itemBService.getItemCategories(payload),
};
return obj[category];
};
Так что это в основном просто поиск динамических свойств в объекте.
Ах, хорошо, это имеет смысл. Думаю, меня просто сбили с толку квадратные скобки, потому что я так привык видеть функции IIFE. Спасибо за ответ!
Сокращенные обозначения JavaScript, безусловно, созрели для создания запутанного синтаксиса. Вы должны внимательно посмотреть, чтобы сказать, что это не какой-то IIFE.
@Barmar: Просмотр AST может помочь, если кому-то это удобно. Бессовестная вилка: astexplorer.net .
Это сокращение примерно эквивалентно следующему традиционному синтаксису функций:
function url(category) {
var obj = {
'itemA': itemAService.getItemCategories(payload),
'itemB': itemBService.getItemCategories(payload),
};
return obj[category];
}
Легче увидеть, что происходит, когда вы создаете именованную переменную для объекта.
Круглые скобки необходимы вокруг объекта в стрелочной функции, потому что, если стрелочная функция начинается с {, она рассматривается как тело, содержащее операторы, а не возвращаемое значение.
Они могли бы поставить [category] сразу после литерала объекта, а не после закрывающей скобки, это было бы понятнее.
Что вас здесь смущает, так это брекеты.
Представьте, что у вас есть выражение объекта, и вы используете оценщик свойств для переменной, которая указывает на объект.
obj = {foo: 1, bar: 2}
return obj["foo"]; //returns 1
Теперь, как бы вы вызвали оценщика недвижимости для литерала объекта? Вам нужны фигурные скобки вокруг них, чтобы завершить сокращенный синтаксис.
return {foo: 1, bar: 2}["foo"]; // WRONG Syntax
return ({foo: 1, bar: 2})["foo"]; // CORRECT syntax
Итак, ваша функция может быть переписана с использованием следующего традиционного синтаксиса.
function getUrl(category) {
return ({
'itemA': itemAService.getItemCategories(payload),
'itemB': itemBService.getItemCategories(payload),
})[category]
}
То же, что
object[property]. Подробнее здесь: МДН.