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

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

Методы итерации

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

const items = $('.item');

items.each((index, element) => {
    console.log(`Элемент ${index}:`, element.textContent);
});

Особенности метода .each():

  • this внутри функции ссылается на текущий DOM-элемент.
  • Можно прерывать выполнение, если функция возвращает false.
items.each(function(index) {
    if (index === 2) return false; // Прерывает цикл после третьего элемента
    console.log(this.textContent);
});

Преобразование коллекций с .map()

Метод .map(callback) применяется для создания новой коллекции, результатом которой является преобразованный набор данных, соответствующий исходной коллекции.

const itemTexts = $('.item').map((index, el) => el.textContent);
console.log(itemTexts); // Массив текстовых содержимых элементов

Отличие от .each() заключается в том, что .map() возвращает массив значений, а не саму коллекцию Cash.

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

Метод .filter(selectorOrFunction) позволяет сузить коллекцию до элементов, удовлетворяющих определённому условию.

const visibleItems = $('.item').filter(':visible');

const specialItems = $('.item').filter((index, el) => el.classList.contains('special'));
  • В качестве аргумента можно использовать CSS-селектор или функцию обратного вызова.
  • Функция должна возвращать true, если элемент должен остаться в коллекции, и false — если его нужно исключить.

Поиск внутри коллекции

Метод .find(selector) выполняет поиск элементов внутри текущей коллекции, создавая новую коллекцию с найденными результатами.

const buttons = $('.container').find('button');
  • Поддерживает любой CSS-селектор.
  • Отличие от .filter() в том, что поиск идёт внутрь дочерних элементов, а не фильтрация текущих.

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

Иногда требуется работать с коллекцией как с обычным массивом JavaScript. Для этого используется метод .toArray():

const itemsArray = $('.item').toArray();
itemsArray.forEach(el => console.log(el.textContent));

Метод возвращает настоящий массив DOM-элементов, позволяющий применять стандартные методы массива (map, filter, reduce и т.д.).

Объединение и добавление элементов

Методы .add(selectorOrElement) и .addBack() позволяют расширять коллекцию:

const itemsAndSpecial = $('.item').add('.special'); // Объединение коллекций

$('.item').find('span').addBack(); // Возврат исходного набора и добавление найденных элементов
  • .add() объединяет текущую коллекцию с новой.
  • .addBack() используется после .find() или .filter() для включения исходных элементов в результат.

Применение изменений к коллекции

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

$('.item')
    .filter(':visible')
    .map((i, el) => el.textContent.toUpperCase())
    .forEach(text => console.log(text));
  • Сначала фильтруется коллекция, оставляя только видимые элементы.
  • Затем производится преобразование текста каждого элемента.
  • В конце результат обрабатывается стандартными методами массива.

Кастомные операции с .map() и .each()

Для сложных сценариев удобно комбинировать .map() и .each():

$('.item').each(function(index) {
    const modifiedText = $(this).text().trim().toLowerCase();
    $(this).text(modifiedText);
});
  • Используется $(this) для повторного обёртывания DOM-элемента в Cash.
  • Позволяет изменять элементы “на лету”, не создавая отдельный массив.

Применение фильтров и преобразований к вложенным коллекциям

Cash поддерживает работу с вложенными коллекциями:

$('.container').find('.item').filter(':first-child').css('color', 'red');
  • .find() выбирает дочерние элементы.
  • .filter() сужает результат до первого элемента.
  • Методы изменения стиля (.css()) применяются к конечной коллекции.

Эти методы образуют основу преобразования коллекций в Cash, позволяя гибко и эффективно управлять DOM, выполнять фильтрацию, преобразования и комбинировать результаты в цепочках. Они обеспечивают высокую читаемость и компактность кода, заменяя громоздкие циклы и проверки, характерные для чистого JavaScript.

Оглавление