缩短箭头函数的小诀窍

作者：Dmitri Pavlutin
翻译：疯狂的技术宅

原文：https://dmitripavlutin.com/ja...

未经允许严禁转载

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

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

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

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

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...

缩短箭头函数的小诀窍

1. 基本语法

2. 减少参数括号

2.1 注意默认参数

2.2 注意参数解构

2.3 无参数

3. 减少花括号和 return

3.1 注意对象文字

4.粗箭头方法

5. 简洁并不总是意味着可读性好

6. 结论

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

疯狂的技术宅

引用和评论

为什么浮点数运算会产生误差

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合