jQuery.map - Практическое использование для функции?

Question

Я пытаюсь лучше понять функцию jQuery.map .

Таким образом, в общих чертах .map берет массив и «сопоставляет» его с другим массивом элементов.

простой пример:

$.map([0,1,2], function(n){
    return n+4;
});

Результаты в [4,5,6]

Мне кажется, я понимаю, что он делает. Я хочу под, зачем кому-то это нужно. Каково практическое использование этой функции? Как вы используете это в своем коде?

Answer 1

Отображение имеет две основные цели: захват свойств из массива элементов и преобразование каждого элемента во что-то еще.

Предположим, у вас есть массив объектов, представляющих пользователей:

var users = [
  { id: 1, name: "RedWolves" },
  { id: 2, name: "Ron DeVera" },
  { id: 3, name: "Jon Skeet" }
];

Отображение - это удобный способ получить определенное свойство из каждого элемента. Например, вы можете преобразовать его в массив идентификаторов пользователей:

var userIds = $.map(users, function(u) { return u.id; });

В качестве другого примера, скажем, у вас есть коллекция элементов:

var ths = $('table tr th');

Если вы хотите сохранить содержимое этих заголовков таблиц для дальнейшего использования, вы можете получить массив их HTML-содержимого:

var contents = $.map(ths, function(th) { return th.html(); });

Answer 2

$.map все о преобразовании предметов в наборе.

Что касается DOM, я часто использую его для быстрого извлечения значений из моих элементов:

var usernames = $('#user-list li label').map(function() {
    return this.innerHTML;
})

Вышеуказанные элементы <label> внутри списка пользователей преобразуются в текст, содержащийся в нем. Тогда я могу сделать:

alert('The following users are still logged in: ' + usernames.join(', '));

Answer 3

Карта - это функция высокого порядка , которая позволяет применять определенную функцию к заданной последовательности, генерируя новую результирующую последовательность, содержащую значения каждого исходного элемента со значением примененной функции. 1003 *

Я часто использую его, чтобы получить действительный селектор всех моих панелей пользовательского интерфейса jQuery, например:

var myPanels = $('a').map(function() { 
  return this.hash || null; 
}).get().join(',');

Это вернет разделенную запятыми строку панелей, доступных на текущей странице, например:

"#home,#publish,#request,#contact"

И это допустимый селектор, который можно использовать:

$(myPanels);// do something with all the panels

Answer 4

Пример:

$.map($.parseJSON(response), function(item) {     
    return { value: item.tagName, data: item.id };
})

Здесь сервер будет возвращать «ответ» в формате JSON, используя $.parseJSON, он преобразует объект JSON в массив объектов Javascript.

Используя $.map для каждого значения объекта, он вызовет function(item) для отображения значения результата: item.tagName, data: item.id

Answer 5

Недавно я обнаружил отличный пример .map в практической обстановке.

Учитывая вопрос Как добавить опции в поле выбора для данного массива (или другого массива):

selectValues = { "1": "test 1", "2": "test 2" };

этот ответ StackOverflow использует .map:

$("mySelect").append(
  $.map(selectValues, function(v,k) {
     return $("<option>").val(k).text(v);
  })
);

Answer 6

Вот одна вещь, для которой вы могли бы использовать это.

$.map(["item1","item2","item3"], function(n){
    var li = document.createElement ( 'li' );
    li.innerHTML = n;
    ul.appendChild ( li );
    return li;
});

Answer 7

Преобразование значений кода в код текста будет возможным использованием. Например, когда у вас есть список выбора, и каждое индексированное значение имеет соответствующий кодовый текст.