为何[0,1,2].map(i=>i+1)生效而[0,1,2].map(i=>{i+1})无效？

嘿，这个问题我太有共鸣了！当初第一次用箭头函数写jQuery遍历的时候也踩过一模一样的坑，咱们来把这个事儿掰扯明白：

核心原因：箭头函数的this是「词法绑定」的 #

这是箭头函数和普通function(){}最关键的差异之一：

• 普通函数的this是动态绑定的：在jQuery的map、each这类遍历方法里，jQuery会主动把this绑定到当前遍历的DOM元素上，所以你用$(this)就能拿到当前的复选框，自然能取出data('id')。
• 箭头函数的this是词法绑定的：它不会自己创建新的this，而是直接继承自定义它时所在的外层作用域的this。比如你这段代码如果是在全局作用域写的，箭头函数里的this就是window；如果是在某个类的方法里写的，this就是类的实例。总之绝对不是当前遍历的复选框，所以$(this).data('id')自然返回undefined。

代码对比一目了然 #

咱们用你的场景举例子：

// ❌ 错误：箭头函数的this不是当前复选框
const checkedIds = $('input[type="checkbox"]:checked').map(() => {
  return $(this).data('id'); // this指向外层作用域，比如window
}).get();

// ✅ 正确：普通函数的this被jQuery绑定为当前复选框
const checkedIds = $('input[type="checkbox"]:checked').map(function() {
  return $(this).data('id'); // this就是当前选中的复选框DOM元素
}).get();

关于兼容性的疑惑：Chrome 66完全支持箭头函数 #

你用的Chrome 66是2018年的版本，而箭头函数作为ES6的核心特性，Chrome从45版本（2015年发布）就已经全面支持了，所以这次的问题和兼容性完全无关，纯粹是this指向的逻辑问题。

额外补充：箭头函数和普通函数的其他关键差异 #

除了this绑定，还有几个点也能帮你区分什么时候用哪种函数：

• 箭头函数没有自己的arguments对象，普通函数有
• 箭头函数不能作为构造函数（不能用new调用）
• 箭头函数没有prototype属性

总结 #

如果在jQuery的遍历方法里需要访问当前遍历的DOM元素，老老实实用普通function(){}；如果你的逻辑需要用到外层作用域的this，那箭头函数才是合适的选择。

内容的提问来源于stack exchange，提问作者Raid55