缩短箭头函数的小诀窍

做者：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 关键字来缩短箭头函数。

你能够将这些诀窍与粗箭头方法放在一块儿使用。

简洁是好的，只要它可以增长可读性便可。若是你有许多嵌套的箭头函数，最好避免使用最短的形式。

---

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

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

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

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13个帮你提升开发效率的现代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？从调用栈到Promise你须要知道的一切
• WebSocket实战：在 Node 和 React 之间进行实时通讯
• 关于 Git 的 20 个面试题
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什么？
• 30分钟用Node.js构建一个API服务器
• Javascript的对象拷贝
• 程序员30岁前月薪达不到30K，该何去何从
• 14个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩展插件
• Node.js 多线程彻底指南
• 把HTML转成PDF的4个方案及实现

---

• 更多文章...