卡卡网

这几天学习了几天箭头函数，今天记录一下，箭头函数换行和花括号的问题，这是一些细节问题，但如果不注意，就可能导致错误出现。

参数定义和箭头之间的换行符

JavaScript 不允许在参数定义和箭头函数中的箭头 ( =>) 之间有换行符。

例如，以下代码会导致SyntaxError：

let multiply = (x,y) 
=> x * y; 

输出：

Uncaught SyntaxError: Unexpected token '=>'

但是，以下代码可以正常工作：

let multiply = (x,y) => 
x * y;

JavaScript 允许在参数之间使用换行符，如下例所示：

let multiply = (
  x,
  y
) => 
x * y;

花括号{}这种情况下可以不要

在 JavaScript 中，表达式的计算结果如下例所示。

10 + 20;

语句执行特定任务，例如：

if (x === y) {
    console.log('x equals y');
}

如果在箭头函数的主体中使用表达式，则不需要使用花括号。

let square = x => x * x;

但是，如果使用语句，则必须将其包裹在一对花括号中，如下例所示：

let except = msg => {
    throw msg;
};

对象字面量应在括号中

以下示例：

let setColor = function (color) {
    return {value: color}
};

let backgroundColor = setColor('Red');
console.log(backgroundColor.value); // "Red"

setColor()函数表达式返回一个将属性value设置为color参数的对象。

如果使用以下语法从箭头函数返回对象字面量，则会出现错误。

p => {object:literal}

例如，以下代码会导致错误。

let setColor = color => {value: color };

由于块和对象字面量都使用大括号，JavaScript 引擎无法区分块和对象。

要解决此问题，需要将对象字面量括在括号中，如下所示：

let setColor = color => ({value: color });

总结

本文介绍了几个细节问题，箭头函数可以在某些部分换行，而花括号在某些情况下是可以不要的，括号的使用要适当，不然会导致错误。

相关文章

• 实例演示无参数、单参数、多参数的箭头函数用法
• 实例详解JS箭头函数=>与传统匿名函数处理this的不同方法

标签: 箭头函数