# JavaScript 箭头函数

JavaScript 箭头函数（超清晰完整版）

我用最简单、最实用、最容易记的方式，一次性讲透 JS 箭头函数，你看完就能看懂所有前端代码里的 () => {}。

---

一、箭头函数是什么？

一句话：
箭头函数 = JavaScript 里简写的匿名函数
专门用来把函数写得更短、更简洁。

它和普通函数功能基本一样，只是写法更酷、更短。

---

二、最基础写法

// 箭头函数
() => {}

// 等价于普通函数
function() {}

结构拆解：

(参数) => { 函数体代码 }

---

三、4 种最常用写法（必背）

1. 无参数

// 箭头函数
const fn = () => {
  console.log('hello')
}

// 调用
fn()

---

2. 一个参数（括号可以省略）

// 完整
const fn = (name) => { console.log(name) }

// 简写（最常用）
const fn = name => { console.log(name) }

---

3. 多个参数

const fn = (a, b) => { return a + b }

---

4. 函数体只有一行 return（大括号 + return 都能省）

// 完整写法
const add = (a, b) => { return a + b }

// 超级简写（最常见！）
const add = (a, b) => a + b

---

四、和普通函数对比（一眼看懂）

// 普通函数
function sum(a, b) {
  return a + b
}

// 箭头函数（短很多）
const sum = (a, b) => a + b

---

五、前端哪里会见到？（到处都是）

1. 回调函数（最常见）

setTimeout(() => {
  console.log('1秒后执行')
}, 1000)

2. 数组方法

const arr = [1,2,3]
arr.map(item => item * 2)

3. 钩子函数

axios.get('/api').then(res => {
  console.log(res)
})

---

六、最重要特点（面试必问）

1. 写法更短
2. 没有自己的 this（继承外面的 this）
3. 不能当构造函数
4. 没有 arguments

---

七、超级速记口诀

无参空括号
一参去括号
一行去大括号
一行自带return

---

最终总结（最简单）

箭头函数 = 简写函数
() => {} 就是前端最常用的函数写法。

如果你愿意，我可以用 3 个小例子让你彻底掌握箭头函数的所有用法！