JavaScript 箭头函数怎么用
你可能在写前端网页时，偶尔会遇到一些简化的函数写法，比如那些用“=>”符号的代码，很多新手会好奇这是什么，又该怎么用。其实这就是JavaScript里的箭头函数，它是ES6版本推出的一种简化函数写法，能让代码更简洁，还能帮新手避开一些容易踩的坑。
箭头函数怎么写？先看和普通函数的区别
先举个生活里的例子，比如你要写一个计算两个数相加的函数，用普通函数写是这样的：
`javascript
// 普通函数：计算两数之和
function add(a, b) {
return a + b;
}
`
换成箭头函数，写法就简化成了：
`javascript
// 箭头函数计算两数之和
const add = (a, b) => a + b;
`
对比一下就能发现，箭头函数的写法有几个明显的简化点：
- 不用写
function关键字，直接用括号包参数，后面跟箭头=>； - 如果函数里只有一行代码，而且是返回结果，不用写
{}花括号，也不用写return，自动返回结果； - 如果只有一个参数，参数的括号还能省略，比如把“计算一个数乘以2”的函数，写成
const double = num => num * 2;，比普通函数少了不少代码。
箭头函数最实用的场景：简化回调函数
回调函数是前端里最常用的场景之一，也是箭头函数最方便的地方。比如你要给一个按钮加点击事件，用普通函数写是这样的：
`javascript
// 普通函数写按钮点击回调
document.getElementById('btn').addEventListener('click', function() {
console.log('按钮被点击了');
});
`
换成箭头函数，代码会更紧凑：
`javascript
// 箭头函数简化按钮点击回调
document.getElementById('btn').addEventListener('click', () => {
console.log('按钮被点击了');
});
`
再举个更生活化的例子，比如你要把一组水果价格都涨10%，用数组的map方法（相当于给数组里的每个元素做处理），用普通函数写是这样的：
`javascript
const fruitPrices = [5, 8, 12];
const newPrices = fruitPrices.map(function(price) {
return price * 1.1;
});
`
用箭头函数就简化成：
`javascript
const fruitPrices = [5, 8, 12];
const newPrices = fruitPrices.map(price => price * 1.1);
`
这段代码读起来也更顺：“给每个价格涨1.1倍”，比普通函数少了冗余的写法，一眼就能看懂。
别踩坑：箭头函数的this和普通函数不一样
虽然箭头函数好用，但有个很重要的区别要注意——this的指向。这是很多新手最容易踩的坑。
举个例子，假设你有一个购物车对象，里面有个计算总价的方法，还用了定时器延迟1秒计算：
`javascript
// 普通函数的this指向对象本身
const cart = {
items: [10, 20, 30],
total: function() {
setTimeout(function() {
// 这里的this指向全局（浏览器里是window），不是cart对象
console.log(this.items); // 结果是undefined
}, 1000);
}
};
cart.total();
`
如果换成箭头函数，就不会有这个问题：
`javascript
// 箭头函数的this继承自外层作用域
const cart = {
items: [10, 20, 30],
total: function() {
setTimeout(() => {
// 这里的this继承自total方法的this，也就是cart对象
console.log(this.items); // 结果是[10,20,30]
}, 1000);
}
};
cart.total();
`
简单说：普通函数的this是谁调用就指向谁，而箭头函数的this是直接继承外层的this，不用再额外存个that变量或者用bind绑定，这也是它在回调里好用的原因。
总结一下，箭头函数的核心优势是“简化写法”和“固定this指向”，平时写回调、数组处理这类场景用它，能让代码更简洁易读，但如果要定义对象的方法、需要动态改变this的场景，还是用普通函数更合适。