jQuery методы $.map() и .map()

Есть несколько полезных методов $.map() и .map(), которые могут быть ярлыками одного из распространенных случаев использования итерации.

.map()

Есть общий вариант использования итерации, который может быть лучше обработан при использовании метода .map(). Всегда, когда мы хотим создать массив или связанную строку на основе всех сопоставленных элементов в нашем селекторе jQuery, лучше будет использовать .map().

Например вместо того, чтобы делать это:

var newArr = [];
 
$( "li" ).each( function() {
    newArr.push( this.id );
});

Мы можем сделать это:

$( "li" ).map( function(index, element) {
    return this.id;
}).get();

Обратите внимание на метод .get(), добавленный в цепочку в конце. .map() фактически возвращает jQuery-обернутую коллекцию, даже если мы возвращаем строки из обратного вызова. Мы должны использовать версию .get() без параметров, чтобы возвратить базовый массив JavaScript, с которым мы можем работать. Чтобы сделать конкатенацию в строку, мы можем объединить в цепочку простой JS метод массива .join() после .get().

$.map

Подобно $.each() и .each(), есть $.map() и .map(). Различие также очень сходно с методами .each(). $.map() работает с простыми массивами JavaScript в то время как .map() работает с элементами коллекции jQuery. Поскольку он работает с простым массивом, $.map() возвращает простой массив и .get() не должен вызываться – фактически, он выбросит ошибку, поскольку это не собственный метод JavaScript.

Предупреждение: $.map() переключает порядок параметров обратного вызова. Это было сделано, чтобы соответствовать собственному JavaScript методу .map(), который стал доступным в ECMAScript 5.

Например:

<li id="a"></li>
<li id="b"></li>
<li id="c"></li>
 
<script>
 
var arr = [{
    id: "a",
    tagName: "li"
}, {
    id: "b",
    tagName: "li"
}, {
    id: "c",
    tagName: "li"
}];
 
// Возвращает [ "a", "b", "c" ]
$( "li" ).map( function( index, element ) {
    return element.id;
}).get();
 
// Также возвращает ["a", "b", "c"]
// Заметьте, что значение идет первым с $.map
$.map( arr, function( value, index ) {
    return value.id;
});
 
</script>

Далее: Использование jQuery Функции .index()