什么时候应该在 ES6 中使用箭头函数？

在本文中，我们将通过一些示例尝试了解何时应该在 ES6 中使用箭头函数而不是传统的函数语法。

在分析为什么要使用箭头函数之前，让我们先了解一下与箭头函数相关的基本细节（包括箭头函数的语法和更多细节）。

箭头函数：借助以下图形表示，我们将尝试了解与箭头函数相关的基本细节。

正如我们可以想象的那样，传统的函数语法，大括号的使用，紧随其后的是函数关键字，并且它需要更多的可执行行，但是我们可以看到箭头函数允许任何用户缩短以更紧凑的方式编写传统函数的语法。

编写箭头函数的语法：以下是编写箭头函数的简单语法：

let name_of_function = (parameters) => ...

我们还可以在圆括号内包含任意数量的参数（表明变量被视为函数的方式）。

使用箭头函数的优点：以下几点将描述与使用箭头函数而不是普通函数相关的优点列表 -

• 这个箭头函数减少了很多代码并使模式更具可读性。
• 箭头函数语法自动将“this”绑定到周围代码的上下文。
• 与编写函数关键字相比，编写箭头=>更灵活。

何时应该使用箭头函数：由于在前面的部分中，我们已经讨论了与箭头函数语法相关的语法、优点和灵活性，这里我们将看到并分析何时以及何时应该使用箭头函数而不是普通函数。

• 我们可以在与数组关联的方法中使用箭头函数语法，例如map()、reduce()、filter()，因为通过使用箭头函数语法而不是使用普通函数语法，可以轻松阅读和理解以及编写代码更有效。
• 如果我们可以在声明 Promise 和回调时使用箭头函数，那么任何用户都更容易理解它们背后的概念，否则使用传统的函数语法概念，如回调地狱，Promise 链最终会变得更难理解，甚至编写会变得有点复杂。

让我们看一些示例，其中我们将仅使用箭头函数语法，并且我们将进一步了解与箭头函数相关的良好可读效果。

示例 1：在此示例中，我们将使用箭头函数来检查用户输入的数字是否大于 10。

Javascript

    let checkNumber = (num) => num > 10 ? 
        console.log("Yes") : console.log("No");
  
    checkNumber(5);
    checkNumber(10);
    checkNumber(20);
    checkNumber(32);

输出：上述代码片段的输出如下：

No
No
Yes
Yes

示例 2：在本示例中，我们将使用数组方法（如 map、reduce 和 filter）对数组元素执行不同的操作。

Javascript

    let array = [1, 3, 5, 8, 9, 7, 6, 2];
  
    let sumOfElements = 
        array.reduce((a, b) => a + b);
    console.log(sumOfElements);
  
    let multiplyElements = 
        array.map((element) => element * 10);
    console.log(multiplyElements);
  
    let filterElements = array.filter(
        (element) => element % 2 === 0);
    console.log(filterElements);

输出：上述代码片段的输出如下：

41
[
 10, 30, 50, 80,
 90, 70, 60, 20 
]
[ 8, 6, 2 ]

使用箭头函数的限制：以下是使用箭头函数的某些限制：

• 箭头函数与 this 或 super 没有自己的绑定。
• 箭头函数不能用作构造函数。
• 箭头函数不能在其体内使用 yield。