🔥 箭头函数：让你的代码更"懒"的写法
🌰 举个生活中的例子
想象你去咖啡店点咖啡：
传统写法（像在念完整的说明书）：
function 给我一杯咖啡(类型, 糖量) {
return "一杯" + 类型 + "咖啡，加" + 糖量 + "勺糖";
}
箭头写法（像在快餐店点餐）：
const 给我一杯咖啡 = (类型, 糖量) =>
`一杯${类型}咖啡，加${糖量}勺糖`;
✨ 箭头函数的"偷懒"规则
规则1：省略 function 关键字
// 传统写法（正式版）
function 加钱(工资, 奖金) {
return 工资 + 奖金;
}
// 箭头写法（简写版）
const 加钱 = (工资, 奖金) => {
return 工资 + 奖金;
};
规则2：如果只有一行代码，可以更懒！
// 传统写法
function 算平方(数字) {
return 数字 * 数字;
}
// 箭头写法 - 完整版
const 算平方 = (数字) => {
return 数字 * 数字;
};
// 箭头写法 - 偷懒版（省掉{}和return）
const 算平方 = (数字) => 数字 * 数字;
// 再懒一点（如果只有一个参数，连括号都能省）
const 算平方 = 数字 => 数字 * 数字;
🎭 箭头函数最重要的特点：认"爹"
场景：公司开会
const 公司 = {
老板: "老王",
员工们: ["小明", "小红", "小刚"],
点名传统方式: function() {
this.员工们.forEach(function(员工) {
// 这里的 this 迷路了！不知道老板是谁
console.log(this.老板 + "说：" + 员工 + "到！"); // ❌ 错误
});
}
};
问题：在传统函数里，this 会"迷路"，不知道老板是谁。
箭头函数的解决办法：
const 公司 = {
老板: "老王",
员工们: ["小明", "小红", "小刚"],
点名箭头方式: function() {
this.员工们.forEach((员工) => {
// 箭头函数记得"爹"是谁（这里的 this 指向公司）
console.log(this.老板 + "说：" + 员工 + "到！"); // ✅ 正确
});
}
};
比喻：
- 传统函数：像离家出走的孩子，不知道自己家在哪
- 箭头函数：像有根线的风筝，永远记得线那头是谁
🍱 各种"偷懒"写法大全
1. 没参数的懒法
// 传统
function 打招呼() {
return "你好！";
}
// 箭头
const 打招呼 = () => "你好！";
2. 一个参数的懒法
// 传统
function 夸人(名字) {
return 名字 + "真好看！";
}
// 箭头（括号可省）
const 夸人 = 名字 => 名字 + "真好看！";
3. 多个参数
// 传统
function 算总和(数字1, 数字2) {
return 数字1 + 数字2;
}
// 箭头
const 算总和 = (数字1, 数字2) => 数字1 + 数字2;
4. 多行代码的写法
// 传统
function 处理订单(订单) {
const 总价 = 订单.价格 * 订单.数量;
const 折扣价 = 总价 * 0.8;
return 折扣价;
}
// 箭头（多行需要{}，并且要写return）
const 处理订单 = (订单) => {
const 总价 = 订单.价格 * 订单.数量;
const 折扣价 = 总价 * 0.8;
return 折扣价;
};
🚀 在 React 中为什么特别有用
React 中的 "this" 问题
class 按钮组件 extends React.Component {
state = { 点击次数: 0 };
// 传统写法 - 需要 bind（像绑鞋带一样麻烦）
点我传统() {
this.setState({ 点击次数: this.state.点击次数 + 1 });
// ❌ 错误：这里的 this 可能是 undefined
}
// 箭头写法 - 自动绑好（像魔术贴鞋子）
点我箭头 = () => {
this.setState({ 点击次数: this.state.点击次数 + 1 });
// ✅ 正确：永远记得 this 是组件实例
};
render() {
return (
<button onClick={this.点我箭头}>
点了 {this.state.点击次数} 次
</button>
);
}
}
更现代的写法（函数组件）
function 计数器() {
const [次数, 设置次数] = useState(0);
// 箭头函数在这里用起来很自然
const 增加次数 = () => 设置次数(次数 + 1);
const 重置 = () => 设置次数(0);
return (
<div>
<p>点击了 {次数} 次</p>
<button onClick={增加次数}>加1</button>
<button onClick={重置}>重置</button>
</div>
);
}
⚠️ 什么时候不要用箭头函数
1. 当函数需要"改名字"时（构造器）
// 传统写法可以
function 人(名字) {
this.名字 = 名字;
}
const 小明 = new 人("小明"); // ✅
// 箭头写法不行
const 人 = (名字) => {
this.名字 = 名字;
};
const 小明 = new 人("小明"); // ❌ 报错！
2. 当函数需要知道自己被谁调用时（对象方法）
const 手机 = {
型号: "iPhone",
// 传统写法 - 知道自己是手机
显示信息: function() {
console.log("这是" + this.型号); // ✅ 正确
},
// 箭头写法 - 不知道自己是谁
错误显示: () => {
console.log("这是" + this.型号); // ❌ 错误
}
};
🎯 快速记忆口诀
箭头函数真简单，
去掉function省空间。
单个参数省括号，
一行代码省return。
this指向很重要，
箭头记得它"爹"好。
传统函数易迷路，
箭头永远记得住。
React里面特别好用，
事件绑定不头痛。
省去bind的麻烦，
代码简洁又好看。
🎮 实战小练习
练习1：转换传统函数
// 把这个变成箭头函数
function 买菜(菜名, 数量) {
return "我要买" + 数量 + "斤" + 菜名;
}
// 你的答案：
const 买菜 = (菜名, 数量) => `我要买${数量}斤${菜名}`;
练习2：数组操作
const 价格表 = [10, 20, 30, 40];
// 传统写法
const 打折价 = 价格表.map(function(价格) {
return 价格 * 0.8;
});
// 箭头写法（更简洁）
const 打折价 = 价格表.map(价格 => 价格 * 0.8);
💎 总结一句话
箭头函数 = 写起来更懒 + 记性更好（记得this）的写法
记住：
- 懒：能省的都省（function、括号、大括号、return）
- 记性好：永远记得创建时的
this是谁 - React最爱：解决事件绑定的头疼问题
刚开始可能会不习惯，用多了就会发现：真香！ 🍚
