javascript - 在 Jquery 函数上使用箭头函数

Question

很难将 Jquery map 函数转换为箭头函数。

这是fiddle 。

// find elements
$('button').click(function(e) {
  let answerArray = $(`[name="foo"]`).map(function() {
    return $(this).val();
  }).get();
  console.log(answerArray)
  
  let answerArray2 = $(`[name="foo"]`).map(x => $(x).val()).get();
  console.log(answerArray2)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="foo">
<input name="foo">
<button>
  enter
</button>

但我正在接收。

VM118 jquery.js:7977 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined at jQuery.fn.init.val (VM102 jquery.js:7977) at HTMLInputElement.$.map.x ((index):74) at VM102 jquery.js:194 at Function.map (VM102 jquery.js:443) at jQuery.fn.init.map (VM102 jquery.js:193) at HTMLButtonElement. ((index):74) at HTMLButtonElement.dispatch (VM102 jquery.js:5183) at HTMLButtonElement.elemData.handle (VM102 jquery.js:4991)

Answer 1

根据您的代码x引用索引而不元素，因此您会收到错误。

使用 .map() 的正确回调函数参数。

Type: Function( Integer index, Element domElement ) => Object A function object that will be invoked for each element in the current set.

// find elements
$('button').click(function(e) {

  let answerArray2 = $(`[name="foo"]`).map((i, x) => $(x).val()).get();
  console.log(answerArray2)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="foo">
<input name="foo">
<button>
  enter
</button>