正在加载...
箭头函数
你已经会声明函数、传入参数，并用 return 把值送出去。许多日常小助手很短，完整的 function 关键字显得偏重。JavaScript 还允许用 箭头——=>——写成更紧凑的一行。
箭头函数是什么
它仍然是函数：接收输入、执行函数体、可以返回结果。变的是写法。通常用 const 起名，列出参数，写 =>，然后是短表达式或 { } 块。
箭头与经典函数对照
📊 经典函数与箭头
| 要点 | 经典写法 | 箭头写法 |
|---|---|---|
| 有名助手 | function add(a, b) { return a + b; } |
const add = (a, b) => a + b; |
| 返回一个表达式 | { } 里写 return a + b; |
=> 后的表达式自动返回 |
| 多条语句 | { } 加上 return |
同样规则：{ } 与 return |
| 一个参数 | (name) |
name => ...（括号可省略） |
| 无参数 | function hi() { ... } |
const hi = () => ...——必须写空的 () |
| 放在哪里 | 声明或表达式 | 几乎总是存在变量里 |
两种写法都能返回数字和字符串。助手很短、又想用清晰的 const 名时，箭头更省事。想让有名的代码块更醒目时，经典 function 也完全正确。
const double = (n) => n * 2;
let answer = double(5);
console.log(answer);
表达式体会自动返回
=> 后面若只有一个表达式，求值后会自动交给调用者——不必写 { }，也不必写 return。这里 double(5) 得到 10。改参数，乘积跟着变。
const label = (score) => {
if (score < 0) {
return "invalid";
}
return "ok";
};
console.log(label(-1));
console.log(label(8));
有花括号就要自己写 return
函数体使用 { } 时，JavaScript 不会自动返回最后一行。像经典函数一样自己写 return。提前退出和多步逻辑才能保持清晰。
const greet = name => "Hello, " + name;
let line = greet("Sara");
console.log(line);
恰好一个参数时可省略括号
只有一个参数时，可以写成 name => ... 而不写 ( )。调用写法不变：greet("Sara")。两个及以上参数时请保留括号。
const hello = () => "Hello";
console.log(hello());
零个参数仍要写 ()
没有输入时，在 => 前写空括号。省略会语法错误。调用仍是 hello()——空括号表示「没有参数」。
const add = (a, b) => a + b;
let total = add(3, 4);
console.log(total);
console.log(add(10, 2));
先起名，再调用
const add = (a, b) => a + b 把箭头存在 add 下。调用方式与其他函数相同：add(3, 4) 得到 7。一个助手、两次调用——不必重写函数体。
把箭头用到页面上
用箭头拼欢迎字符串，调用它，把结果写进段落——页面模式相同，函数更短。
<!DOCTYPE html>
<html>
<head>
<title>arrow — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
const welcome = guest => "Hello, " + guest;
let box = document.getElementById("msg");
box.textContent = welcome("Omar");
</script>
</body>
</html>
段落显示 Hello, Omar。箭头返回了字符串；下一行把它放到页面上。只改参数、刷新，再读新的一行。下一课讲 作用域——这些名字在哪里可见。
练习步骤
- 把
function triple(n) { return n * 3; }改写成表达式体的const箭头。 - 写
const hi = name => "hi " + name并打印hi("Neda")。 - 写
const ping = () => "pong"并调用一次。 - 写带块体的箭头：
n === 0时返回"zero"，否则"nonzero"。 - 定义
const add = (a, b) => a + b后确认add(6, 1)为7。 - 在 HTML 示例里只改参数字符串，刷新并阅读段落。
常见失误
=>后写了{ }却忘了return——调用结果是undefined- 零个参数时去掉
() - 把
=>当成比较运算符——箭头是函数语法，不是「大于」 - 指望本页讲完
this——绑定差异留给后面；本页只讲紧凑写法 - 以为箭头可以忘掉
return——表达式仍会返回；块体仍需要return
小结
- 箭头函数使用
=>，通常存在const里 =>后的裸表达式会自动返回{ }体需要显式return- 单参数可省略
( )；零参数需要空的() - 用名字调用，和其他函数一样
- 页面更新可以用箭头返回的字符串
- 下一课：作用域——名字住在哪里
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
8
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部