Порядок аргументов в методе .map ()

Question

Мне любопытно, почему функция map() в этом коде работает. Все, что я читаю онлайн, говорит, что функция обратного вызова map () ожидает, что первый аргумент будет currentValue, а второй - index. Если я передам их в таком порядке: (el, i), это не сработает, но поменяет их местами: (i, el).

Что мне здесь не хватает?

$('#works').click( () => {
  var results = $(".myBoxes:checked").map( (i, el)=>el.value).get();

  $('#results').html( results.join(', ') );
});

$('#noWorks').click( () => {
  var results = $(".myBoxes:checked").map( (el, i)=>el.value).get();

  $('#results').html( results.join(', ') );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="box1"><input id="box1" type="checkbox" class="myBoxes" value="one"/> Box 1</label>
<label for="box2"><input id="box2" type="checkbox" class="myBoxes" value="two"/> Box 2</label>
<label for="box3"><input id="box3" type="checkbox" class="myBoxes" value="three"/> Box 3</label>
<label for="box4"><input id="box4" type="checkbox" class="myBoxes" value="four"/> Box 4</label>

<br><br>
<button id="works">This works.</button> | 
<button id="noWorks">This doesn't.</button>

<br><br>
<div id="results"></div>

Answer 1

Вы используете jQuery, который имеет другую структуру.

Array.prototype.map Аргументы обратного вызова действительно (element, index, array).

Но jQuery.prototype.map Аргументы обратного вызова: (index, element).

Вы должны иметь в виду, какой метод вы используете.

Для примера использования Array.prototype.map вместо этого в вашем коде:

$('#works').click(() => {
  var results = [...$(".myBoxes:checked")].map(el => el.value);

  $('#results').html(results.join(', '));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="box1"><input id="box1" type="checkbox" class="myBoxes" value="one"/> Box 1</label>
<label for="box2"><input id="box2" type="checkbox" class="myBoxes" value="two"/> Box 2</label>
<label for="box3"><input id="box3" type="checkbox" class="myBoxes" value="three"/> Box 3</label>
<label for="box4"><input id="box4" type="checkbox" class="myBoxes" value="four"/> Box 4</label>

<br><br>
<button id="works">This works.</button>

<br><br>
<div id="results"></div>

Обратите внимание, что jQuery.map * использует (element, index) (в отличие от jQuery.prototype.map):

$('#works').click(() => {
  var results = $.map($(".myBoxes:checked"), el => el.value);

  $('#results').html(results.join(', '));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="box1"><input id="box1" type="checkbox" class="myBoxes" value="one"/> Box 1</label>
<label for="box2"><input id="box2" type="checkbox" class="myBoxes" value="two"/> Box 2</label>
<label for="box3"><input id="box3" type="checkbox" class="myBoxes" value="three"/> Box 3</label>
<label for="box4"><input id="box4" type="checkbox" class="myBoxes" value="four"/> Box 4</label>

<br><br>
<button id="works">This works.</button>

<br><br>
<div id="results"></div>

Answer 2

Это распространенная ошибка, которую люди делают при использовании jQuery. Старайтесь избегать одновременного использования простых JS и jQuery, это огромный источник ошибок.

В данном случае вы используете jQuery для получения элемента (который даст вам объект jQuery), но затем вы захотите использовать простой метод JS map ().

Взгляните на метод jQuery здесь: https://api.jquery.com/jQuery.map/