Трансформация данных с $.map()

$.map() — мощный инструмент в библиотеке jQuery, предназначенный для преобразования массивов и объектов. Его использование позволяет обходить коллекции данных, изменять их структуру или значения и получать новый массив с результатами трансформации. Этот метод часто сравнивают с нативным Array.prototype.map(), однако $.map() более универсален, так как поддерживает как массивы, так и объекты.

Синтаксис

$.map(arrayOrObject, callback)

arrayOrObject — массив или объект, который требуется обработать.
callback — функция обратного вызова, выполняемая для каждого элемента коллекции. Она принимает два параметра:
- index или key — индекс элемента в массиве или ключ свойства объекта.
- value — значение текущего элемента.
Возвращаемое значение — новый массив, состоящий из результатов выполнения функции callback. Если callback возвращает null или undefined, элемент исключается из результата.

Работа с массивами

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

var numbers = [1, 2, 3, 4, 5];

var squared = $.map(numbers, function(index, value) {
    return value * value;
});

console.log(squared); // [1, 4, 9, 16, 25]

Особенности при работе с массивами:

callback получает индекс первым аргументом, значение — вторым. Это отличие от стандартного Array.map, где первым аргументом всегда значение.
Можно фильтровать элементы, возвращая null или undefined для исключения их из результирующего массива.

var filtered = $.map(numbers, function(i, val) {
    return val % 2 === 0 ? val : null;
});

console.log(filtered); // [2, 4]

Работа с объектами

$.map() также умеет обходить объекты, передавая в callback ключ и значение. Это удобно для трансформации структуры данных или генерации нового массива на основе свойств объекта.

var user = {
    name: "Анна",
    age: 28,
    city: "Москва"
};

var userInfo = $.map(user, function(key, value) {
    return key + ": " + value;
});

console.log(userInfo); // ["name: Анна", "age: 28", "city: Москва"]

Особенности при работе с объектами:

Порядок перебора ключей не гарантирован.
Позволяет создавать массивы с любым форматом данных на основе свойств объекта.
Если функция возвращает массив, его элементы автоматически “сплющиваются” в результирующий массив.

var nested = $.map(user, function(k, v) {
    return [k, v];
});

console.log(nested); // ["name", "Анна", "age", 28, "city", "Москва"]

Отличие от стандартного `map()`

Поддержка объектов наряду с массивами.
callback имеет порядок аргументов (ключ/индекс, значение).
Возвращаемое значение null или undefined исключает элемент из результата.
Автоматическое “сплющивание” вложенных массивов, возвращаемых из callback.

Практические сценарии использования

1. Преобразование форматов данных

var products = [
    { name: "Ноутбук", price: 50000 },
    { name: "Телефон", price: 20000 }
];

var names = $.map(products, function(i, product) {
    return product.name;
});

console.log(names); // ["Ноутбук", "Телефон"]

2. Фильтрация элементов

var numbers = [10, 15, 20, 25];

var evenNumbers = $.map(numbers, function(i, n) {
    return n % 2 === 0 ? n : null;
});

console.log(evenNumbers); // [10, 20]

3. Преобразование объектов в массив для отображения

var scores = {
    Alice: 90,
    Bob: 75,
    Charlie: 85
};

var scoreList = $.map(scores, function(player, score) {
    return player + " — " + score;
});

console.log(scoreList); // ["Alice — 90", "Bob — 75", "Charlie — 85"]

4. Создание плоского массива из вложенных структур

var nestedArray = [[1, 2], [3, 4]];

var flatArray = $.map(nestedArray, function(i, arr) {
    return arr; // автоматически сплющится
});

console.log(flatArray); // [1, 2, 3, 4]