后面带 () 的箭头函数是什么意思?

IT技术 javascript ecmascript-6
2021-02-22 21:17:02
const actionsMap = {
  [GET_USER]: (state, action) => ({ post: action.msg })
};

我有我偶然发现的这段代码。我一直在使用我在 {} 格式上看到的箭头函数,这个 () 包装器是什么意思?

3个回答

使用箭头函数,您可以使用单个语句或块作为函数体。这两个是等价的:

() => foo
() => {
  return foo;
}

在您的示例中,如果 lambda 被定义为() => {post: action.msg}对象 ( {}) 将被解释为主体块而不是对象。运行时会尝试将其解析为等效于:

function () {
  post: action.msg
}

这是一个命名标签和属性访问,在这里没有多大意义。通过包裹在括号中,您向解析器暗示它是一个要评估的表达式,并且单表达式主体上的粗箭头函数规则开始生效,使其等效于:

function () {
  return {post: action.msg};
}

当您想要做两个相关的事情时(有时在映射/减少算法中很有用),要解决单表达式规则,您可以使用括号对一对表达式进行分组:

foo.reduce((p, c) => (c.counted = true, p += c.value));

这将设置 , 的counted属性c,然后添加c.valuep并将结果p += c.value作为 的新值返回p

括号将 ECMAScript 中的表达式包装起来,可与逗号运算符一起使用,以对多个表达式进行分组。评估组时返回最后一个表达式的结果。

例如:

var i = 0, j = 0;
console.log((j += 10, i += 2), j);

将打印2 10,因为j()组中递增并稍后打印。

谢谢,这个回复比其他回复更详细,所以我投票认为这是正确的,因为它显然意味着它是一个对象响应。其他答案更简洁,对其他人更好,所以请继续检查
2021-04-27 21:17:02
@squint 固定。我总是忘记标签。
2021-04-28 21:17:02
“……这显然是无效的。” 在那种特殊情况下实际上并非无效,但肯定不是预期的。
2021-05-04 21:17:02

这是 ES6 箭头函数。更多阅读:https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

ES6

(state, action) => ({ post: action.msg })

ES5

function(state, action) {
   return { post: action.msg };
}

来自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Returning_object_literals

返回对象字面量

请记住,使用简洁语法 params => {object:literal} 返回对象文字将无法按预期工作:

var func = () => { foo: 1 }; // 调用 func() 返回 undefined!var func = () => { foo: function() {} }; // 语法错误:函数语句需要一个名称

这是因为大括号 ({}) 内的代码被解析为一系列语句(即 foo 被视为标签,而不是对象文字中的键)。

请记住将对象字面量括在括号中:

var func = () => ({ foo: 1 });

所以..如果你想返回一个对象文字,把它包装在 ()