缩短箭头函数的小诀窍每日前端夜话0xD6
日前端夜话0xD6
每日前端夜话，陪你聊前端。
每天晚上18:00准时推送。
正文共：1653 字
预计阅读时间：10 分钟
作者：Patricia Neil
翻译：疯狂的技术宅
来源：dmitripavlutin
使用箭头语法，你可以定义比函数表达式短的函数。在某些情况下，你可以完全省略：
参数括号
关键字
甚至大括号 。
下面就让我们来探讨一下如何使箭头函数简洁明了、易于阅读。另外你会发现一些需要注意的棘手情况，。
1. 基本语法
完整版本的箭头函数声明包括：
一对带有参数枚举的括号
后面跟随箭头
以函数体 结尾
典型的箭头函数如下所示：
这里有一点需要注意：你不能在参数 和箭头 之间放置换行符。
接下来我们看看如何缩短箭头函数，在处理回调时，使它更易于阅读。
2. 减少参数括号
以下函数 只有一个参数：
箭头函数只有一个参数 。该参数被包装在一对圆括号 中。
当箭头函数只有一个参数时，可以省略参数括号。
可以利用这种性质来简化 ：
新版本的箭头函数 在其单个参数 的两边没有括号。少两个字符：不过仍然是一个胜利。
尽管这种简化很容易掌握，但是在必须保留括号的情况下也有一些例外。让我们看看这些例外。
2.1 注意默认参数
如果箭头函数有一个带有默认值的参数，则必须保留括号。
参数 的默认值为 。在这种情况下，必须将一对括号放在单个参数周围。
2.2 注意参数解构
你还必须将括号括在已解构的参数周围：
该函数的唯一参数使用解构 来访问对象的属性 。这时必须将解构式用括号括起来：。
2.3 无参数
当函数没有参数时，也需要括号：
没有任何参数。保留参数括号 。
3. 减少花括号和 return
当箭头函数主体内仅包含一个表达式时，可以去掉花括号 和 关键字。
不必担心会忽略 ，因为箭头函数会隐式返回表达式评估结果。
这是我最喜欢的箭头函数语法的简化形式。
没有花括号 和 的 函数：
是箭头函数语法的最短版本。即使没有 ，也会隐式返回 表达式。
3.1 注意对象文字
当使用最短的箭头函数语法并返回对象文字时，可能会遇到意外的结果。
让我们看看这时下会发生些什么事：
期望 返回一个对象，它实际上返回 。
问题在于 JavaScript 将大括号 解释为函数体定界符，而不是对象文字。 被解释为标签标识符，而不是属性。
要使该函数返回一个对象，请将对象文字包装在一对括号中：
是一个表达式。现在 JavaScript 将其视为包含对象文字的表达式。
4.粗箭头方法
类字段提案（截至2019年8月，第3阶段）向类中引入了粗箭头方法语法。这种方法中的 总是绑定到类实例上。
让我们定义一个包含粗箭头方法的 类：
是 类中的一个方法，使用粗箭头语法定义。 方法中的 始终绑定到类实例。
你可以编写简洁的粗箭头方法吗？是的你可以！
让我们简化 方法：
是一个简洁的粗箭头方法定义。省略了其单个参数 周围的一对括号，以及大括号 和 关键字。
5. 简洁并不总是意味着可读性好
我喜欢简洁的箭头函数，可以立即展示该函数的功能。
很容易暗示一个将数字乘以 的函数。
尽管需要尽可能的使用短语法，但是必须明智地使用它。否则你可能会遇到可读性问题，尤其是在多个嵌套的简洁箭头函数的情况下。
JavaScript代码可读性
我更喜欢可读性而不是简洁，因此有时我会故意保留大括号和 关键字。
让我们定义一个简洁的工厂函数：
虽然 很短，但是乍一看可能很难理解它的作用。
这时我会避免使用最短的语法，并使函数定义更长一些：
在较长的形式中， 更易于理解，它返回箭头函数。
无论如何，你都可能会进行尝试。但我建议你将可读性放在简洁性之前。
6. 结论
箭头函数以提供简短定义的能力而闻名。
使用上面介绍的诀窍，可以通过删除参数括号、花括号或 关键字来缩短箭头函数。
你可以将这些诀窍与粗箭头方法放在一起使用。
简洁是好的，只要它能够增加可读性即可。如果你有许多嵌套的箭头函数，最好避免使用最短的形式。
原文：https://dmitripavlutin.com/javascript-arrow-functions-shortening-recipes/
下面夹杂一些私货：也许你和高薪之间只差这一张图
2019年京程一灯课程体系上新，这是我们第一次将全部课程列表对外开放。
愿你有个好前程，愿你月薪30K。我们是认真的 ！
唠一唠怎样才能拿高薪
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20191021A0J7B000?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
