Преобразование массивов

Библиотека Zepto.js предоставляет компактный, но мощный набор инструментов для работы с DOM, AJAX и коллекциями элементов, аналогичный jQuery. Особое внимание уделяется работе с массивами и коллекциями элементов, что позволяет выполнять фильтрацию, преобразование и манипуляции эффективно и лаконично.

Метод map

Метод map в Zepto.js используется для трансформации коллекции элементов. Он применяет функцию ко всем элементам набора и возвращает новый массив с результатами.

var items = $('li'); // Получение всех элементов списка
var texts = items.map(function(index, element) {
    return $(element).text();
});
console.log(texts); // Массив текстовых значений элементов <li>

Особенности:

  • Возвращается обычный массив, а не объект Zepto.
  • Функция принимает два аргумента: index — номер элемента в коллекции и element — сам DOM-узел.
  • Можно выполнять любые вычисления и возвращать новые значения, включая объекты, строки и числа.

Метод each

each позволяет выполнять обход коллекции без создания нового массива, но с возможностью модификации элементов на месте.

$('li').each(function(index, element) {
    $(element).text('Элемент ' + index);
});

Ключевые моменты:

  • Возвращается исходный объект Zepto, что позволяет использовать цепочку вызовов.
  • Для выхода из цикла можно использовать return false;.

Преобразование коллекций в массивы

Zepto.js предоставляет метод toArray, который конвертирует коллекцию Zepto в обычный массив DOM-элементов. Это особенно полезно для последующей работы с методами стандартного JavaScript, такими как filter, map или reduce.

var elementsArray = $('div').toArray();
var ids = elementsArray.map(function(el) { return el.id; });

Особенности:

  • Работает на любом наборе элементов Zepto.
  • Позволяет использовать стандартные методы массивов ES5/ES6.
  • Разделяет функциональность Zepto и чистого JavaScript.

Метод get

Метод get предоставляет более гибкую альтернативу toArray:

var firstElement = $('p').get(0); // Первый элемент коллекции
var allElements = $('p').get();  // Все элементы в виде массива
  • Передача индекса возвращает конкретный DOM-элемент.
  • Без аргументов возвращается массив всех элементов коллекции.

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

Zepto.js поддерживает методы фильтрации через filter и not. Они позволяют создавать подмножества элементов на основе селекторов, функций или существующих коллекций.

// Оставить только элементы с классом active
var activeItems = $('li').filter('.active');

// Исключить элементы с классом disabled
var enabledItems = $('li').not('.disabled');

// Фильтрация через функцию
var evenItems = $('li').filter(function(index) {
    return index % 2 === 0;
});

Особенности фильтров:

  • Возвращается новая коллекция Zepto, можно продолжать цепочку.
  • filter и not принимают селектор, функцию или объект DOM.

Применение методов массивов ES6

После конвертации коллекции Zepto в массив с помощью toArray, доступны все стандартные методы массивов Jav * aScript:

var ids = $('div').toArray().map(el => el.id);
var filtered = $('li').toArray().filter(el => el.textContent.includes('важно'));
var sum = $('input').toArray().reduce((acc, el) => acc + Number(el.value), 0);

Преимущества:

  • Использование современного синтаксиса arrow functions.
  • Совмещение удобства Zepto для выборки элементов с мощью стандартных массивов.
  • Позволяет создавать сложные цепочки преобразований данных без лишней обертки.

Создание массивов вручную

Zepto позволяет создавать коллекции из обычных массивов или элементов с помощью $():

var nodes = [document.createElement('div'), document.createElement('span')];
var zeptoCollection = $(nodes);
zeptoCollection.addClass('highlight');

Особенности:

  • Коллекция Zepto создается на основе массива DOM-элементов.
  • Позволяет применять методы Zepto к динамически созданным элементам.
  • Удобно для генерации элементов программно и их последующего манипулирования.

Сочетание методов

Методы map, filter, each, get и toArray можно комбинировать для сложных операций:

var evenIds = $('li')
    .filter(function(index) { return index % 2 === 0; })
    .toArray()
    .map(el => el.id);

Результат — массив ID элементов с чётными индексами. Этот подход демонстрирует гибкость Zepto при работе с коллекциями и массивами.

Вывод

Zepto.js предоставляет лаконичные и мощные инструменты для работы с массивами и коллекциями DOM. Методы map, each, filter, not, get и toArray позволяют создавать цепочки преобразований, сочетая удобство библиотеки с функционалом стандартных массивов JavaScript. Их использование обеспечивает эффективное управление элементами страницы, фильтрацию и трансформацию данных.

Оглавление