重点是通过典型场景实践掌握箭头函数：从filter、setTimeout、addEventListener入手，练熟单/多/无参写法；注意多行逻辑需{}+return、返回对象要()包裹；验证this不绑定、无arguments等特性；结合任务列表项目巩固理解。

直接上手做，重点不是写得多，而是把几类典型场景跑通、踩准坑、理清逻辑。

从回调函数切入，练熟基本形态

先拿最常见的 array.filter、setTimeout、addEventListener 练手，把单参数、多参数、无参数三种写法都写一遍：

• 无参数：`() => console.log('done')`，比如 setTimeout(() => alert('timeout'), 1000)
• 单参数：`item => item > 10`，可省括号，用于 arr.map(x => x * 2)
• 多参数：`(a, b) => a + b`，括号不能省，用于 arr.sort((x, y) => x - y)

处理多行逻辑和返回对象

单行能省 {} 和 return，但一加日志或变量就得补全：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• 多行必须写大括号+显式 return：num => { console.log(num); return num * 2; }
• 返回对象字面量必须用小括号包裹：id => ({ id, status: 'active' })，否则 `{ id, status: 'active' }` 会被当成代码块

重点验证 this 和 arguments 行为

别只看语法，要亲手验证它“不像函数”的地方：

• 在对象方法里写箭头函数，this 指向外层作用域，不是当前对象
• 用 call/apply 调用箭头函数，this 不会变，传参也无效
• 箭头函数里访问 arguments 会报错，改用剩余参数 (...args) => args.length

结合真实小项目整合练习

搭一个极简任务列表（不用框架），把箭头函数用在关键位置：

• 输入框回车添加任务 → 用 event => {...} 处理
• 点击删除某项 → tasks.filter((task, i) => i !== index)
• 切换完成状态 → task => ({ ...task, done: !task.done })
• 统计未完成数 → tasks.filter(t => !t.done).length

过程中自然暴露 this 误用、对象返回漏括号等问题，改一次就记牢一次。