// 每日前端夜话 第587 篇
// 正文共 1700 字
// 预计阅读时间:7 分钟
使用箭头语法,你可以定义比函数表达式短的函数。在某些情况下,你可以完全省略:
-
参数括号 (param1, param2)
-
return
关键字 -
甚至大括号 { }
。
下面就让我们来探讨一下如何使箭头函数简洁明了、易于阅读。另外你会发现一些需要注意的棘手情况,。
1. 基本语法
完整版本的箭头函数声明包括:
-
一对带有参数枚举的括号 (param1, param2)
-
后面跟随箭头 =>
-
以函数体 {FunctionBody}
结尾
典型的箭头函数如下所示:
const sayMessage = (what, who) => {
return `${what}, ${who}!`;
};
sayMessage('Hello', 'World'); // => 'Hello, World!'
这里有一点需要注意:你不能在参数 (param1, param2)
和箭头 =>
之间放置换行符。
接下来我们看看如何缩短箭头函数,在处理回调时,使它更易于阅读。
2. 减少参数括号
以下函数 greet
只有一个参数:
const greet = (who) => {
return `${who}, Welcome!`
};
greet('Aliens'); // => "Aliens, Welcome!"
greet
箭头函数只有一个参数 who
。该参数被包装在一对圆括号(who)
中。
当箭头函数只有一个参数时,可以省略参数括号。
可以利用这种性质来简化 greet
:
const greetNoParentheses = who => {
return `${who}, Welcome!`
};
greetNoParentheses('Aliens'); // => "Aliens, Welcome!"
新版本的箭头函数 greetNoParentheses
在其单个参数 who
的两边没有括号。少两个字符:不过仍然是一个胜利。
尽管这种简化很容易掌握,但是在必须保留括号的情况下也有一些例外。让我们看看这些例外。
2.1 注意默认参数
如果箭头函数有一个带有默认值的参数,则必须保留括号。
const greetDefParam = (who = 'Martians') => {
return `${who}, Welcome!`
};
greetDefParam(); // => "Martians, Welcome!"
参数 who
的默认值为 Martians
。在这种情况下,必须将一对括号放在单个参数(who ='Martians')
周围。
2.2 注意参数解构
你还必须将括号括在已解构的参数周围:
const greetDestruct = ({ who }) => {
return `${who}, Welcome!`;
};
const race = {
planet: 'Jupiter',
who: 'Jupiterians'
};
greetDestruct(race); // => "Jupiterians, Welcome!"
该函数的唯一参数使用解构 {who}
来访问对象的属性 who
。这时必须将解构式用括号括起来:({who {}})
。
2.3 无参数
当函数没有参数时,也需要括号:
const greetEveryone = () => {
return 'Everyone, Welcome!';
}
greetEveryone(); // => "Everyone, Welcome!"
greetEveryone
没有任何参数。保留参数括号 ()
。
3. 减少花括号和 return
当箭头函数主体内仅包含一个表达式时,可以去掉花括号 {}
和 return
关键字。
不必担心会忽略 return
,因为箭头函数会隐式返回表达式评估结果。这是我最喜欢的箭头函数语法的简化形式。
没有花括号 {}
和 return
的 greetConcise
函数:
const greetConcise = who => `${who}, Welcome!`;
greetConcise('Friends'); // => "Friends, Welcome!"
greetConcise
是箭头函数语法的最短版本。即使没有 return
,也会隐式返回 $ {who},Welcome!
表达式。
3.1 注意对象文字
当使用最短的箭头函数语法并返回对象文字时,可能会遇到意外的结果。
让我们看看这时下会发生些什么事:
const greetObject = who => { message: `${who}, Welcome!` };
greetObject('Klingons'); // => undefined
期望 greetObject
返回一个对象,它实际上返回 undefined
。
问题在于 JavaScript 将大括号 {}
解释为函数体定界符,而不是对象文字。message:
被解释为标签标识符,而不是属性。
要使该函数返回一个对象,请将对象文字包装在一对括号中:
const greetObject = who => ({ message: `${who}, Welcome!` });
greetObject('Klingons'); // => { message: `Klingons, Welcome!` }
({ message: `${who}, Welcome!` })
是一个表达式。现在 JavaScript 将其视为包含对象文字的表达式。
4.粗箭头方法
类字段提案(截至2019年8月,第3阶段)向类中引入了粗箭头方法语法。这种方法中的 this
总是绑定到类实例上。
让我们定义一个包含粗箭头方法的 Greet
类:
class Greet {
constructor(what) {
this.what = what;
}
getMessage = (who) => {
return `${who}, ${this.what}!`;
}
}
const welcome = new Greet('Welcome');
welcome.getMessage('Romulans'); // => 'Romulans, Welcome!'
getMessage
是 Greet
类中的一个方法,使用粗箭头语法定义。getMessage
方法中的 this
始终绑定到类实例。
你可以编写简洁的粗箭头方法吗?是的你可以!
让我们简化 getMessage
方法:
class Greet {
constructor(what) {
this.what = what;
}
getMessage = who => `${who}, ${this.what}!`
}
const welcome = new Greet('Welcome');
welcome.getMessage('Romulans'); // => 'Romulans, Welcome!'
getMessage = who => `${who}, ${this.what}!
是一个简洁的粗箭头方法定义。省略了其单个参数 who
周围的一对括号,以及大括号 {}
和 return
关键字。
5. 简洁并不总是意味着可读性好
我喜欢简洁的箭头函数,可以立即展示该函数的功能。
const numbers = [1, 4, 5];
numbers.map(x => x * 2); // => [2, 8, 10]
x => x * 2
很容易暗示一个将数字乘以 2
的函数。
尽管需要尽可能的使用短语法,但是必须明智地使用它。否则你可能会遇到可读性问题,尤其是在多个嵌套的简洁箭头函数的情况下。
我更喜欢可读性而不是简洁,因此有时我会故意保留大括号和 return
关键字。
让我们定义一个简洁的工厂函数:
const multiplyFactory = m => x => x * m;
const double = multiplyFactory(2);
double(5); // => 10
虽然 multiplyFactory
很短,但是乍一看可能很难理解它的作用。
这时我会避免使用最短的语法,并使函数定义更长一些:
const multiplyFactory = m => {
return x => x * m;
};
const double = multiplyFactory(2);
double(5); // => 10
在较长的形式中,multiplyFactory
更易于理解,它返回箭头函数。
无论如何,你都可能会进行尝试。但我建议你将可读性放在简洁性之前。
6. 结论
箭头函数以提供简短定义的能力而闻名。
使用上面介绍的诀窍,可以通过删除参数括号、花括号或 return
关键字来缩短箭头函数。
你可以将这些诀窍与粗箭头方法放在一起使用。
简洁是好的,只要它能够增加可读性即可。如果你有许多嵌套的箭头函数,最好避免使用最短的形式。
本文分享自微信公众号 - 前端先锋(jingchengyideng)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。