JavaScript 箭头函数:适用与不适用场景
现代 JavaScript 中最引人注目的功能之一是引入了箭头函数,用 => 来标识。
这种函数有两大优点 – 非常简洁的语法,和更直观的作用域和 this的绑定。
这些优点有时导致箭头函数比其他形式的函数声明更受欢迎。
例如,受欢迎的 airbnb eslint 配置 会在您创建匿名函数时强制使用JavaScript箭头函数。
然而,就像工程中的任何东西一样,箭头函数优点很明显,同时也带来了一些负面的东西。 使用他们的时候需要权衡一下。
学习如何权衡是更好地使用箭头函数的关键。
在本文中,我们将首先回顾箭头函数的工作原理,然后深入研究箭头函数改进代码的示例,最后深入研究箭不建议使用头函数的示例。
JavaScript 箭头函数究竟是什么?
JavaScript 箭头函数大致相当于 python 中的 lambda 函数 或 Ruby 中的 blocks。
这些是匿名函数,它们有自己的特殊语法,接受一定数量的参数,并在其封闭的作用域的上下文(即定义它们的函数或其他代码)中操作。
让我们依次分解这些部分。
箭头函数语法
箭头函数具有单一的总体结构,然后在特殊情况下可以通过多种方式简化它们。 核心结构如下所示:
(argument1, argument2, … argumentN) => {
// function body
}
括号内的是参数列表,后跟“胖箭头”(=>),最后是函数体。
这与传统函数非常相似,我们只是省略 function 关键字并在参数后添加一个胖箭头(=>)。
然而,有许多方法可以简化箭头函数。
首先,如果函数体是单个表达式,则可以不使用花括号并将其置于内联中(省略大括号直接将表达式写在一行中)。 表达式的结果将由函数返回。 例如:
const add = (a, b) => a + b;
其次,如果只有一个参数,你甚至可以省略参数的括号。例如:
const getFirst = array =&g