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

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

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

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

我们可以看到，传统函数语法使用了大括号，紧接着是函数关键字，并且需要更多的可执行代码行，但是箭头函数可以让用户以更紧凑的方式缩写传统函数的语法。

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

let name_of_function = (parameters) => ...

我们也可以在圆括号中包含任意数量的参数（用于表示变量被视为函数）。

使用箭头函数的优势： 以下几点将描述使用箭头函数而不是普通函数的优势：

• 箭头函数减少了大量代码，使代码更易读。
• 箭头函数语法将“this”自动绑定到周围代码的上下文。
• 写作箭头 = >比写作 function 关键字更灵活。

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

• 我们可以在与数组相关的方法中使用箭头函数语法，比如 map()，reduce()，filter() ，因为通过使用箭头函数语法，而不是使用普通函数语法，可以更容易地读懂和理解以及编写代码。

• 如果我们在声明Promise和回调时使用箭头函数，则任何用户都可以更轻松地理解它们背后的概念，否则使用传统函数语法的概念，如回调地狱、Promise链，最终会变得更难以理解，甚至会变得更加复杂。

让我们看一些示例，我们将只使用箭头函数语法，并进一步看到与箭头函数相关的良好可读性效果。

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

Javascript

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

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

No
No
Yes
Yes

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

JavaScript

<script>
    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);
</script>

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

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

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

• 箭头函数没有自己的this或super绑定。
• 箭头函数不应该用作方法。
• 箭头函数不能用作构造函数。
• 箭头函数在其体内不能使用yield。
• 箭头函数不适用于call apply和bind方法。