箭头函数简化回调,单参数单表达式可省略function、括号、花括号和return;无参或多参需保留括号;多语句需花括号和显式return;不绑定this和arguments,继承外层作用域。

箭头函数让回调写得更轻量,尤其在数组方法(如 map、filter、reduce)中效果明显。核心是省略 function 关键字、括号(单参数时)、花括号和 return(单表达式时)。
单参数 + 单表达式:最简写法
当回调只接收一个参数,且函数体只有一句返回表达式,可极致精简:
-
[1, 2, 3].map(x => x * 2)→[2, 4, 6] -
users.filter(user => user.active)→ 筛出 active 为 true 的用户 -
items.find(item => item.id === 5)→ 找 id 为 5 的项
无参或多个参数:括号不能省
无参数必须写空括号;两个及以上参数必须用小括号包裹:
setTimeout(() => console.log('done'), 1000)[1, 2, 3].reduce((sum, val) => sum + val, 0)btn.addEventListener('click', (e) => e.target.classList.toggle('active'))
需要多语句?加花括号和 return
一旦逻辑不止一句,就得加花括号,并显式写 return(否则默认返回 undefined):
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
立即学习“Java免费学习笔记(深入)”;
arr.map(x => { const sq = x * x; return sq > 10 ? sq : 0; })list.sort((a, b) => { if (a.name b.name ? 1 : 0; })
注意 this 和 arguments 的变化
箭头函数不绑定自己的 this 和 arguments,而是继承外层作用域的值。这在事件处理或定时器中很实用,避免手动 bind:
obj.method = () => console.log(this.name); // this 指向定义时的上下文- 但因此它不能用作构造函数,也不适合需要动态
this的场景(如 Vue 选项对象中的 methods)
不复杂但容易忽略:简洁的前提是逻辑简单;一旦嵌套过深或需调试,适时换回普通函数反而更清晰。

















