在本教程中，您将借助示例了解 JavaScript 箭头函数。
箭头函数是 ES6 版本 JavaScript 中引入的特性之一。与常规函数相比，它允许您以更简洁的方式创建函数。例如，
这个函数：

// function expression
let x = function(x, y) {
   return x * y;
}

可以写成：

// using arrow functions
let x = (x, y) => x * y;

使用箭头函数。

箭头函数语法

箭头函数的语法是：

let myFunction = (arg1, arg2, ...argN) => {
    statement(s)
}

这里，

myFunction 是函数的名称
arg1, arg2, …argN 是函数参数
statement(s) 是函数体

如果主体有单个语句或表达式，您可以将箭头函数编写为：

let myFunction = (arg1, arg2, ...argN) => expression

示例 1：无参数的箭头函数

如果一个函数不带任何参数，那么你应该使用空括号。例如，

let greet = () => console.log('Hello');
greet(); // Hello

示例 2：带一个参数的箭头函数

如果函数只有一个参数，则可以省略括号。例如，

let greet = x => console.log(x);
greet('Hello'); // Hello

示例 3：作为表达式的箭头函数

您还可以动态创建函数并将其用作表达式。例如，

let age = 5;
let welcome = (age < 18) ?
  () => console.log('Baby') :
  () => console.log('Adult');
welcome(); // Baby

示例 4：多行箭头函数

如果函数体有多条语句，则需要将它们放在花括号 { } 中。例如，

let sum = (a, b) => {
    let result = a + b;
    return result;
}
let result1 = sum(5,7);
console.log(result1); // 12

this 与箭头函数

在常规函数中，this 关键字指的是调用它的函数。
但是，this 与箭头函数无关。箭头函数没有自己的 this。因此，无论何时调用 this，它都指的是其父范围。例如，

在常规函数中

function Person() {
    this.name = 'Jack',
    this.age = 25,
    this.sayName = function () {
        // this is accessible
        console.log(this.age);
        function innerFunc() {
            // this refers to the global object
            console.log(this.age);
            console.log(this);
        }
        innerFunc();
    }
}
let x = new Person();
x.sayName();

输出

25
undefined
Window {}

在这里，this.sayName() 内的 this.age 是可访问的，因为 this.sayName() 是对象的方法。
然而，innerFunc() 是一个普通函数，this.age 是不可访问的，因为 this 指的是全局对象（浏览器中的窗口对象）。因此，innerFunc() 函数内部的 this.age 给出 undefined。

在箭头函数中

function Person() {
    this.name = 'Jack',
    this.age = 25,
    this.sayName = function () {
        console.log(this.age);
        let innerFunc = () => {
            console.log(this.age);
        }
        innerFunc();
    }
}
const x = new Person();
x.sayName();

输出

25
25

这里，innerFunc() 函数是使用箭头函数定义的。在箭头函数中，this 指父函数的作用域。因此，this.age 给出 25。

参数绑定

常规函数具有参数绑定。这就是为什么当您将参数传递给常规函数时，您可以使用 arguments 关键字访问它们。例如，

let x = function () {
    console.log(arguments);
}
x(4,6,7); // Arguments [4, 6, 7]

箭头函数没有参数绑定。
当您尝试使用箭头函数访问参数时，它会给出错误。例如，

let x = () => {
    console.log(arguments);
}
x(4,6,7); 
// ReferenceError: Can't find variable: arguments

要解决这个问题，可以使用扩展语法。例如，

let x = (...n) => {
    console.log(n);
}
x(4,6,7); // [4, 6, 7]

带有 Promise 和回调的箭头函数

箭头函数提供了更好的语法来编写 Promise 和回调。例如，

// ES5
asyncFunction().then(function() {
    return asyncFunction1();
}).then(function() {
    return asyncFunction2();
}).then(function() {
    finish;
});

可以写成

// ES6
asyncFunction()
.then(() => asyncFunction1())
.then(() => asyncFunction2())
.then(() => finish);

使用箭头函数应该避免的事情

你不应该使用箭头函数在对象内部创建方法。

let person = {
    name: 'Jack',
    age: 25,
    sayName: () => {
        // this refers to the global .....
        //
        console.log(this.age);
    }
}
person.sayName(); // undefined

不能使用箭头函数作为构造函数。例如，

let Foo = () => {};
let foo = new Foo(); // TypeError: Foo is not a constructor

注意：箭头函数是在 ES6 中引入的。某些浏览器可能不支持使用箭头功能。访问JavaScript 箭头函数支持以了解更多信息。

上一教程 ：JS ES6 下一教程 ：JS Default Parameters

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/arrow-function

JavaScript 箭头函数