缩短箭头函数的技巧

更新日期: 2019-09-22阅读: 1.9k标签: 技巧

使用箭头语法,你可以定义比函数表达式短的函数。在某些情况下,你可以完全省略:

  • 参数括号 (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 关键字来缩短箭头函数。

你可以将这些诀窍与粗箭头方法放在一起使用。

简洁是好的,只要它能够增加可读性即可。如果你有许多嵌套的箭头函数,最好避免使用最短的形式。

原文:https://dmitripavlutin.com/javascript-arrow-functions-shortening-recipes/

链接: https://www.fly63.com/article/detial/6072

微信小程序技巧_你需要知道的小程序开发技巧

一直以来进行了比较多的微信小程序开发... 总会接触到一些和官方组件或 api 相关或其无法解决的需求,于是决定在这里小小的整理一下微信小程序开发的一些技巧

微信小程序分享到朋友圈方法与技巧

小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友,小程序如何分享到朋友圈呢?使用canvas绘制一张图片,并用wx.previewImage预览图片,然后长按图片保存图片到手机。

前端新手程序员不知道的 20个小技巧

前端新手程序员不知道的 20个小技巧:作为前端开发者,使用双显示器能大幅提高开发效率、学编程最好的语言不是PHP,是English、东西交付之前偷偷测试一遍、问别人之前最好先自己百度,google一下、把觉得不靠谱的需求放到最后做,很可能到时候需求就变了...

小技巧:检查你本地及公共 IP 地址

本地的 IP 地址是分配给你计算机上的内部硬件或虚拟网卡的本地/私有 IP 地址。根据你的 LAN 配置,上述 IP 地址可能是静态或动态的。公共的 IP 地址是你的 Internet 服务提供商(ISP)为你分配的公共/外部 IP 地址。

12 个 CSS 高级技巧汇总

使用 :not() 在菜单上应用/取消应用边框;给body添加行高;所有一切都垂直居中;逗号分隔的列表;使用负的 nth-child 选择项目;对图标使用SVG;优化显示文本;对纯CSS滑块使用 max-height;继承 box-sizing

26 个 jQuery使用技巧

禁用右键点击;禁用搜索文本框;新窗口打开链接;检测浏览器;预加载图片;样式筛选;列高度相同;字体大小调整;返回页面顶部;获取鼠标的xy坐标;验证元素是否为空;替换元素

提高网站加载速度的一些小技巧

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站

《CSS世界》中提到的实用技巧

清除浮动主要用于子元素浮动(float)之后,父元素无法撑起高度和宽度。文字少时居中,多时靠左因为div嵌套着p,所以p的尺寸并不会超过div。但是要注意,当p的内容为英文单词组成的时候

不常被提及的JavaScript小技巧

这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略。Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的

CSS-in-JS 库 styled-class

为什么要在JavaScript里写CSS?避免命名全局污染,条件和动态样式(比如选择主题色之类的),在框架层面进行限制或补充(比如补全供应商前缀),避免业务人员使用奇技淫巧

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!