箭头函数简化数组高阶函数回调:单参数单表达式可省function、括号、花括号和return;返回对象需加小括号;多/无参数须用圆括号;多语句需花括号和return;无this绑定,继承外层this。

箭头函数能大幅简化 map、filter 等数组高阶函数的回调写法,核心在于省略 function 关键字、括号(单参数时)、花括号和 return(单表达式时)。
单参数 + 单表达式:最简写法
当回调只接收一个参数,且逻辑只是返回一个简单计算结果时,可精简为一行:
-
[1, 2, 3].map(x => x * 2)→[2, 4, 6] -
['a', 'bb', 'ccc'].filter(str => str.length > 1)→['bb', 'ccc'] - 等价于传统写法:
arr.map(function(x) { return x * 2; }),但更轻量直观
隐式返回对象字面量:需加小括号
若 map 中要返回对象,直接写 { id: x } 会被解析为代码块(导致语法错误),必须用小括号包裹:
-
[1, 2, 3].map(x => ({ id: x, name: `item${x}` }))→ 正确返回对象数组 - 错例:
x => { id: x }不返回对象,而是执行语句(无返回值)
多参数或无参数:括号不可省
参数个数 ≠ 1 时,必须用圆括号包裹参数列表:
arr.filter((item, index) => item > 0 && index % 2 === 0)-
arr.map((_, i) => i)(用_表示忽略首参,i是索引) - 无参场景(少见但存在):
Array(3).fill().map(() => Math.random())
需要多语句逻辑:仍需花括号 + 显式 return
一旦回调含条件判断、变量声明或多步操作,就得恢复完整函数体:
users.filter(user => { const age = user.birthYear ? new Date().getFullYear() - user.birthYear : 0; return age >= 18; })- 此时箭头函数只是省了
function,但结构和普通函数一致
不复杂但容易忽略:箭头函数没有自己的 this 和 arguments,在数组方法中通常不是问题,但若回调内需访问外层上下文(比如类方法中调用 map 并引用 this.xxx),箭头函数反而更安全——它自动继承外层 this。


















