Получение массива значений

Zepto.js — легковесная библиотека для работы с DOM, вдохновлённая jQuery. Одной из её ключевых возможностей является удобное извлечение и манипулирование данными элементов. В этом разделе рассматривается процесс получения массива значений элементов страницы и работа с ним.

Метод map

Метод map позволяет трансформировать набор элементов, возвращаемых селектором Zepto, в массив произвольных значений. Его синтаксис:

$(селектор).map(function(index, element) {
    return /* значение */;
});
  • index — индекс элемента в коллекции.
  • element — текущий DOM-элемент.

Пример получения текста всех элементов с классом .item:

var texts = $('.item').map(function(i, el) {
    return $(el).text();
}).get();

console.log(texts); // ["Элемент 1", "Элемент 2", "Элемент 3"]

Ключевой момент: метод map возвращает объект Zepto, а не массив. Для получения чистого массива используется метод .get().

Метод get

Метод .get() извлекает элементы из объекта Zepto в виде массива. Без параметров он возвращает массив всех элементов коллекции:

var elementsArray = $('.item').get();

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

var firstElement = $('.item').get(0);

Использование .get() особенно полезно для передачи элементов в стандартные функции JavaScript, работающие с массивами, такие как forEach, filter, map.

Метод toArray

Альтернативный способ получения массива элементов — метод toArray(). Он эквивалентен вызову .get() без параметров:

var arrayElements = $('.item').toArray();

Разница между .get() и .toArray() минимальна, но .toArray() чаще воспринимается как более семантичный способ получения массива элементов.

Получение значений полей форм

Для работы с формами Zepto предоставляет методы val() и их сочетания с map:

var inputValues = $('input[name="username"]').map(function(i, el) {
    return $(el).val();
}).get();

console.log(inputValues); // ["user1", "user2", "user3"]

Этот подход позволяет быстро формировать массив значений всех выбранных полей ввода.

Работа с атрибутами

Извлечение значений атрибутов элементов осуществляется через метод attr() в сочетании с map:

var links = $('a').map(function(i, el) {
    return $(el).attr('href');
}).get();

console.log(links); // ["https://site1.com", "https://site2.com"]

Таким образом можно создавать массивы ссылок, идентификаторов, классов и любых других атрибутов.

Фильтрация и трансформация

Использование map позволяет комбинировать извлечение значений с фильтрацией или трансформацией данных:

var lengths = $('p').map(function(i, el) {
    var text = $(el).text();
    return text.length > 0 ? text.length : null;
}).get();

console.log(lengths); // [45, 12, 0, 30]

null и undefined при вызове .get() автоматически исключаются, что упрощает формирование чистых массивов.

Особенности работы с коллекциями Zepto

  • Коллекции Zepto — это массивоподобные объекты, поддерживающие методы each, map, filter.
  • Методы map и get обеспечивают гибкую интеграцию с нативными массивами.
  • Все методы возвращают новый объект Zepto или массив, не изменяя исходную коллекцию, что соответствует функциональному стилю программирования.

Практическое применение

  1. Сбор данных форм для отправки на сервер.
  2. Формирование массивов ссылок или идентификаторов для динамического создания списков.
  3. Анализ текста элементов для статистики или подсчёта символов.
  4. Фильтрация элементов по условиям с последующим созданием массива значений.

Использование методов map и get позволяет создавать компактный и читаемый код, эффективно извлекая данные из DOM с минимальной нагрузкой на память и производительность.

Оглавление