JavaScript 箭头函数基础

Begindev 编辑部 March 25, 2026

箭头函数 (Arrow Functions) 是在 ECMAScript 6 (ES6) 中引入的，相比传统的 JavaScript 函数，它提供了一种更简洁的函数表达式写法。

它们提供了一种简化的方式来定义函数，特别适用于简单的单行操作。本节课将探讨箭头函数的基本语法及其基本用法。

1. 理解基本语法

箭头函数的一般语法如下：

(参数) => 表达式;

让我们来分解一下：

参数 (parameters): 这是函数可以接受的输入值列表，用逗号分隔。如果只有一个参数，圆括号可以省略。如果没有参数，你必须使用空圆括号 ()。
=>: 这是“箭头”符号，也是箭头函数名称的由来。它将参数与函数体分隔开。
表达式 (expression): 这是函数执行并返回的代码。如果函数体由单个表达式组成，return 关键字是隐含的，表达式的值会被自动返回。这被称为 隐式返回 (implicit return)。

1.1 示例 1：一个简单的箭头函数

这个箭头函数接受一个参数 (x) 并返回它的平方：

const square = (x) => x * x;
console.log(square(5)); // 输出: 25

在这种情况下，由于只有一个参数 x，我们也可以这样写：

const square = x => x * x; // 这里的 'x' 周围的圆括号是可选的。
console.log(square(5)); // 输出: 25

1.2 示例 2：没有参数的箭头函数

当没有参数时，你必须使用空圆括号：

const sayHello = () => console.log("你好!");
sayHello(); // 输出: 你好!

1.3 示例 3：多个参数的箭头函数

当有两个或更多参数时，圆括号是必须的：

const add = (a, b) => a + b;
console.log(add(2, 3)); // 输出: 5

2. 带代码块（Block Body）的箭头函数

当函数体包含多个表达式，或者你需要使用语句而不是单个表达式时，你必须使用 代码块 (Block Body)。

代码块被包裹在花括号 {} 中。当使用代码块时，你必须显式地使用 return 关键字来返回值。

带代码块的箭头函数语法如下：

(参数) => {
  // 语句
  return 表达式;
};

2.1 示例 4：带代码块的箭头函数

这个箭头函数接受两个参数 a 和 b，计算它们的和，然后返回结果：

const add = (a, b) => {
  const sum = a + b;
  return sum;
};
console.log(add(2, 3)); // 输出: 5

2.2 示例 5：带代码块的更复杂的箭头函数

这个例子演示了一个计算矩形面积的箭头函数：

const calculateArea = (width, height) => {
  const area = width * height;
  console.log("正在计算面积..."); // 额外的语句
  return area;
};
console.log(calculateArea(5, 10)); // 输出: 正在计算面积... \n 50

3. 隐式返回 (Implicit Returns) 详解

如前所述，箭头函数可以使用 隐式返回。这意味着如果函数体由单个表达式组成，可以省略 return 关键字，该表达式的值会被自动返回。这使得语法更加简洁。

3.1 示例 6：实战中的隐式返回

const multiply = (x, y) => x * y; // 隐式返回
console.log(multiply(4, 6)); // 输出: 24

3.2 示例 7：带复杂表达式的隐式返回

const getDiscountedPrice = (price, discountPercentage) => price * (1 - discountPercentage / 100);
console.log(getDiscountedPrice(100, 20)); // 输出: 80

重要提示： 隐式返回仅适用于单个表达式。如果你有多个语句或需要执行更复杂的逻辑，你必须使用代码块 {} 并显式使用 return 关键字。