将jQuery map函数转换为箭头函数时遇到问题，附代码示例

嘿，我一眼就看到问题出在哪了！你在把jQuery的map()回调换成箭头函数时，踩了个很容易忽略的小细节——jQuery对象的map()方法给回调传的参数顺序和你想的不一样！

咱们先理清楚两种写法的区别：

• 你原来的普通函数写法：

  $(`[name="foo"]`).map(function() {
    return $(this).val();
  })
  

  这里的普通函数里，this会自动指向当前遍历到的DOM元素，所以$(this).val()能顺顺利利拿到输入框的值。

• 你写的箭头函数写法：

  $(`[name="foo"]`).map(x => $(x).val())
  

  问题就在这个x上！jQuery的map()给回调传的第一个参数是元素的索引（比如0、1这种数字），第二个参数才是咱们要的DOM元素！你把x当成了元素，但它其实只是个序号，$(x)当然拿不到正确的输入值啦。

正确的箭头函数写法 #

只需要调整参数，拿到第二个参数就行：

let answerArray2 = $(`[name="foo"]`).map((index, element) => $(element).val()).get();

要是觉得索引没用，用下划线占位也可以，看起来更清晰：

let answerArray2 = $(`[name="foo"]`).map((_, element) => $(element).val()).get();

额外小技巧 #

如果你习惯了普通数组map()的参数顺序（元素在前，索引在后），也可以用jQuery的工具函数$.map()，它的参数顺序和数组map完全一致，而且还不用加.get()，直接返回数组：

let answerArray2 = $.map($(`[name="foo"]`), element => $(element).val());

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