Категория: Инструменты jQuery > Операции с массивами и объектами
jQuery.map( массив, callback(элементМассива, индексВМассиве) )
Возвращает: Массив
Описание: Переводит все элементы массива или массиво-подобного объекта в другой массив элементов.
jQuery.map( массив, callback(элементМассива, индексВМассиве) )
Добавлена в версию: 1.0
массив
Массив для перевода.
callback(элементМассива, индексВМассиве)
Любое значение
Функция для обработки каждого элемента. Первый аргумент функции является элементом, а второй аргумент - индексом. Функция может вернуть любое значение.
this будет глобальным объектом окна.jQuery.map( массивИлиОбъект, callback( значение, индексИлиКлюч ) )
Добавлена в версию: 1.6
Массив или объект для перевода.
callback( значение, индексИлиКлюч )
Функция для обработки каждого пункта. Первым аргументом функции является значение; вторым аргументом является индекс или ключ массива или свойство объекта. Функция может вернуть любое значение, чтобы добавить к массиву. Возвращаемый массив будет сводятся в результирующий массив. В функции, это относится к глобальному (окно) объекту.
Метод $.map() применяет функцию к каждому элементу массива, собирая результат в новом массиве. До jQuery 1.6, $.map() поддерживала перевод только массивов. Начиная с jQuery 1.6 она также переводит объекты.
Массиво-подобные объекты - те, со свойством .length и значением индекса .length - 1 — должны быть преобразованы в фактические массивы перед передачей $.map(). Библиотека jQuery представляет $.makeArray() для такого переоборудования.
Функция перевода, которая предоставляется в этот метод вызывается для каждого элемента верхнего уровня в массиве и передает два аргумента: значение элемента и его индекс или ключ внутри массива или объекта.
Функция может возвратить:
- переведенное значение, которое будет отображаться в массиве результата
null, для удаления элемента- массив значений, который будет помещен в полный массив
Примеры
Пример 1
Парочка примеров использования .map()Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ var arr = [ "a", "b", "c", "d", "e" ] $("div").text(arr.join(", ")); arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); }); $("p").text(arr.join(", ")); arr = jQuery.map(arr, function (a) { return a + a; }); $("span").text(arr.join(", ")); }); </script> <style> div { color:blue; } p { color:green; margin:0; } span { color:red; } </style> </head> <body> <div></div> <p></p> <span></span> </body> </html>
Пример 2
Трансформирует исходный массив в новый добавляя при этом 4 к каждому значению.
$.map( [0,1,2], function(n){
return n + 4;
});
[4, 5, 6]
Пример 3
Трансформирует исходный массив в новый добавляя при этом 1 к каждому значению, которое больше 0 (иначе значение удаляется).
$.map( [0,1,2], function(n){
return n > 0 ? n + 1 : null;
});
[2, 3]
Пример 4
Трансформирует исходный массив в новый. В новом массиве совместно содержатся старые значения и они же увеличенные на единицу.
$.map( [0,1,2], function(n){
return [ n, n + 1 ];
});
[0, 1, 1, 2, 2, 3]
Пример 5
Трансформирует исходный массив в новый. В новом массиве все значения возведены в квадрат.
$.map( [0,1,2,3], function (a) { return a * a; } );
[0, 1, 4, 9]
Пример 6
Удаляет элементы возвращаяnull из функции. Удаляет любые цифры меньшие, чем 50, а остальные уменьшает на 45.
$.map( [0, 1, 52, 97], function (a) { return (a > 50 ? a - 45 : null); } );
[7, 52]
Пример 7
Для увеличения массива результата, возвращается массив внутри функции.
var array = [0, 1, 52, 97];
array = $.map(array, function(a, index) {
return [a - 45, index];
});
[-45, 0, -44, 1, 7, 2, 52, 3]
Пример 8
Переводит карту исходного объекта в новый массив и удваивает каждое значение.
var dimensions = { width: 10, height: 15, length: 20 };
dimensions = $.map( dimensions, function( value, index ) {
return value * 2;
});
[20, 30, 40]
Пример 9
Переводит карту ключей объекта в массив
var dimensions = { width: 10, height: 15, length: 20 },
keys = $.map( dimensions, function( value, index ) {
return index;
});
["width", "height", "length"]
Была ли эта информация полезной?
