Что делают квадратные скобки после функции ES6? - PullRequest
Новая
       18

Что делают квадратные скобки после функции ES6?

1 голос
/ 12 июня 2019

Недавно я искал способ переписать некрасивый оператор switch / case и наткнулся на эту статью Medium .

Я переписал свой switch / case в функцию es6, например:

const url = category => ({
          'itemA': itemAService.getItemCategories(payload),
          'itemB': itemBService.getItemCategories(payload),
        })[category]

Когда я вызываю эту функцию с чем-то вроде const response = url(category);, она работает, и это здорово!Но потом мне стало интересно, что именно означает [category] в конце функции.Я подумал, что, может быть, это была функция с немедленным вызовом, но это тоже не совсем верно.

В статье упоминается, что это объектный литерал, но когда я пошел в документы MDN, я не смог найти ничего, что объясняло бычто это такое или что он делает, или даже любые примеры, которые демонстрируют эту же вещь.

Так что же он делает?

Ответы [ 3 ]

2 голосов
/ 12 июня 2019

Этот сокращенный вариант примерно эквивалентен следующему традиционному синтаксису функции: 

function url(category) {
    var obj = {
      'itemA': itemAService.getItemCategories(payload),
      'itemB': itemBService.getItemCategories(payload),
    };
    return obj[category];
}

Проще увидеть, что происходит, когда вы создаете именованную переменную для объекта.

Круглые скобки необходимы вокруг объекта в функции стрелки, потому что если функция стрелки начинается с {, она обрабатывается как тело, содержащее операторы, а не как возвращаемое значение.

Они могли бы поставить [category] сразу после литерала объекта, а не после закрывающей скобки, что могло бы быть более понятным.

2 голосов
/ 12 июня 2019

Это не "после" функции, это в теле функции.Он также может быть записан как: 

  const url  = category => {
    const obj = {
      'itemA': itemAService.getItemCategories(payload),
      'itemB': itemBService.getItemCategories(payload),
    };

    return obj[category];
 };

Так что это в основном просто поиск динамического свойства в объекте.

1 голос
/ 12 июня 2019

Что вас смущает, так это скобки.

Представьте, что у вас есть выражение объекта и вы используете оценщик свойства для переменной, которая указывает на объект. 

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]

}
...