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>