JavaScript箭头(arrow)函数详解

箭头函数的概念

Arrow Function 是 ECMAScript 6 引入的新特性，通常又称为箭头函数。它是一种更简洁、更易读、更简单的函数定义方式。

箭头函数表达式语法形如：

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

箭头函数完整语法可以看做简化版的“常规函数表达式”。

箭头函数的特点

简短精悍的语法

箭头函数可以使用更简短的语法定义函数，特别适合于仅包含一行代码的函数。

// 常规函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

自动绑定 this

箭头函数的 this 始终指向其上下文中的 this 值，并且不可以通过 call() 方法来修改 this 的值。这可以避免传统 JavaScript 函数出现“意外的 this”问题。

// 常规函数
const dog = {
  name: "小黄",
  bark: function() {
    console.log(`${this.name}汪汪！`);
  }
}

// 箭头函数
const dog = {
  name: "小黄",
  bark: () => {
    console.log(`${this.name}汪汪！`);
  }
}

dog.bark(); // 输出 undefined汪汪！

省略 return

当函数体只有一条语句时，可以省略 return 语句。

// 常规函数
function double(num) {
  return num * 2;
}

// 箭头函数
const double = num => num * 2;

示例说明

接下来，我们通过两个示例来详细解释箭头函数的应用。

示例一：用箭头函数实现一次性函数

一次性函数指的是该函数只执行一次，并且不可以再次执行。传统的 JavaScript 函数需要定义一个变量来实现一次性函数的功能，但是箭头函数可以通过自调匿名函数来实现一次性函数的功能。

const clickButton = () => {
  console.log("Button clicked!");
  document.getElementById("btn").removeEventListener("click", clickButton);
}

document.getElementById("btn").addEventListener("click", clickButton);

该示例中定义了一个 clickButton 箭头函数，它在第一次被点击时打印指定信息并从文档中移除该函数的事件监听器。该函数只被触发一次。

示例二：用箭头函数遍历数组

箭头函数还可以简化遍历数组的语法。这在需要迭代多维数组时非常有用。

const books = [
  {
    title: "JavaScript高级程序设计",
    author: "Nicholas C. Zakas"
  },
  {
    title: "JavaScript权威指南（第6版）",
    author: "David Flanagan"
  },
  {
    title: "你不知道的JavaScript",
    author: "Kyle Simpson"
  }
];

books.forEach(book => console.log(`${book.title}：${book.author}`));

该示例中定义了一个 books 数组，并用 forEach() 方法遍历其中的所有元素。该函数通过模板文字语法将书名和作者连接输出。