ES6标准 Arrow Function（箭头函数=>）

ES6标准 Arrow Function（箭头函数=>）攻略

ES6标准 Arrow Function是一个非常实用的函数特性，它能够简化函数定义的写法，同时提高代码可读性。本文将为您详细讲解 Arrow Function 的语法、作用、适用场景和注意事项。

Arrow Function 的语法

Arrow Function 的语法结构为：

(param1, param2, ..., paramN) => { statements }

箭头函数使用一个箭头（=>）代替传统的函数定义。param1 ... paramN是指函数的参数，{ statements }是函数体。函数体可以是一个或多个语句，并可以有返回值。

注：如果当前函数只有一条语句可以省略大括号和 return 关键字，例如：

(param1, param2, ..., paramN) => expression

Arrow Function 的作用与适用场景

Arrow Function 的作用是简化函数的定义和提高可读性，它适用于任何需要使用函数或回调函数的场景。常见场景包括：

1. 数组的 map 和 filter 操作

使用 Arrow Function，可以更加简洁地定义一个数组的 map 或 filter 操作。例如：

const numbers = [1, 2, 3, 4, 5];

const result = numbers.map(number => number * 2); // [2, 4, 6, 8, 10]

const evenNumbers = numbers.filter(number => number % 2 === 0); // [2, 4]

1. Promise

在 Promise 中，使用 Arrow Function 可以更加方便地处理异步操作。例如：

const p = new Promise((resolve, reject) => {
  // 处理异步操作
  // 如果成功，调用 resolve(data)
  // 如果失败，调用 reject(error)
})

Arrow Function 的注意事项

需要注意的地方有：

1. 箭头函数没有 "this"，它继承自上文的函数作用域；
2. 箭头函数没有 "arguments" 对象；
3. 箭头函数不适用于需要 "this" 或 "arguments" 对象的场景；
4. 箭头函数不能被用作构造函数。

示例说明

下面通过两个示例详细说明 Arrow Function 的使用方法及注意事项。

示例一

const person = {
  name: '张三',
  sayHello() {
    setTimeout(() => {
      console.log(`你好，我是${this.name}`);
    }, 1000);
  }
};

person.sayHello(); // 输出：你好，我是张三

在上面的示例中，我们定义了一个 person 对象和一个 sayHello 方法。在 sayHello 方法中，我们使用 Arrow Function 定义了一个定时器函数。

在箭头函数中，this 指向 person 对象的上下文，而不是定时器函数的上下文。如果我们使用传统的函数定义语法，需要使用 var that = this 或者 bind(this) 将 this 传递进定时器函数。

示例二

const numbers = [1, 2, 3, 4, 5];

const doubleEvenNumbers = numbers.filter(number => {
  if (number % 2 === 0) {
    return true;
  }
}).map(number => number * 2);

console.log(doubleEvenNumbers); // 输出：[4, 8]

在上面的示例中，我们定义了一个数组 numbers，然后使用 Arrow Function 定义了一个 filter 函数和一个 map 函数，最终得到一个新的数组 doubleEvenNumbers。

在箭头函数中，我们省略了 return 和大括号，使代码更加简洁易懂。如果我们使用传统的函数定义语法，需要使用 return 语句和花括号。