[英]What do the square brackets after ES6 function do?
Recently I was looking for a way to rewrite an ugly switch/case statement and came across this Medium article . 最近,我在寻找一种重写丑陋的switch / case语句的方法,并遇到了这篇Medium文章 。
I rewrote my switch/case into an es6 function like this: 我将开关/盒重写为如下的es6函数:
const url = category => ({
'itemA': itemAService.getItemCategories(payload),
'itemB': itemBService.getItemCategories(payload),
})[category]
When I call this function with something like const response = url(category);
当我用const response = url(category);
函数调用此函数时const response = url(category);
it works, which is great! 它有效,太好了! But then I got to wondering what exactly the [category]
means at the end of the function. 但是后来我想知道[category]
在函数末尾究竟意味着什么。 I thought maybe it was an Immediately Invoked Function, but that didn't seem right either. 我以为这可能是立即调用的函数,但这似乎也不对。
The article mentions that it's an object literal, but when I went to the MDN docs I couldn't find anything that explained what this is or what it does, or even any examples that showcase this same thing. 文章提到这是一个对象文字,但是当我访问MDN文档时,找不到任何能解释其含义或作用的内容,甚至找不到任何展示此内容的示例。
So what does it do? 那怎么办呢?
It's not "after" the function, it is in the functions body. 它不是在函数之后,而是在函数主体中。 It could also be written as: 它也可以写成:
const url = category => {
const obj = {
'itemA': itemAService.getItemCategories(payload),
'itemB': itemBService.getItemCategories(payload),
};
return obj[category];
};
So this is basically just a dynamic property lookup in the object. 因此,这基本上只是对象中的动态属性查找。
That shorthand is roughly equivalent to the following traditional function syntax: 该简写大致等于以下传统函数语法:
function url(category) {
var obj = {
'itemA': itemAService.getItemCategories(payload),
'itemB': itemBService.getItemCategories(payload),
};
return obj[category];
}
It's easier to see what's happening when you create a named variable for the object. 为对象创建命名变量时,更容易看到正在发生的事情。
The parentheses are needed around the object in the arrow function because if an arrow function begins with {
it's treated as a body containing statements, rather than a value to return. 箭头函数中的对象周围需要括号,因为如果箭头函数以{
开头,它将被视为包含语句的主体,而不是要返回的值。
They could have put [category]
immediately after the object literal, rather than after the close parenthesis, that might have been clearer. 他们本来可以将[category]
放在对象文字之后,而不是放在右括号之后,这可能会更加清楚。
What confuses you here are the braces. 大括号让您感到困惑。
Imagine that you have an object expression and you use a property assessor on the variable which points to the object. 假设您有一个对象表达式,并且在指向该对象的变量上使用了一个属性评估器。
obj = {foo: 1, bar: 2}
return obj["foo"]; //returns 1
Now, how would you call a property assessor on an object literal? 现在,您将如何称呼对象文字的属性评估器? You need braces around them to complete the shorthand syntax. 您需要在它们周围加上大括号以完成速记语法。
return {foo: 1, bar: 2}["foo"]; // WRONG Syntax
return ({foo: 1, bar: 2})["foo"]; // CORRECT syntax
So, your function can be rewritten using the following traditional syntax. 因此,可以使用以下传统语法来重写您的函数。
function getUrl(category) {
return ({
'itemA': itemAService.getItemCategories(payload),
'itemB': itemBService.getItemCategories(payload),
})[category]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.