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

Библиотека Cash — это лёгкая альтернатива jQuery, ориентированная на работу с DOM и коллекциями элементов. Помимо манипуляций с элементами страницы, она предоставляет удобные методы для работы с массивоподобными объектами, особенно коллекциями DOM-элементов.

Получение коллекции элементов

Для начала необходимо получить коллекцию элементов с помощью селектора:

const items = $('.item'); // коллекция элементов с классом item

Коллекция items ведёт себя как массивоподобный объект, что позволяет применять к ней методы перебора и фильтрации.

Перебор элементов

Метод .each() позволяет итерировать коллекцию:

items.each((index, element) => {
    console.log(index, element);
});
  • index — порядковый номер элемента в коллекции.
  • element — DOM-узел, к которому можно применять стандартные свойства и методы.

Метод поддерживает прерывание итерации, если функция возвращает false:

items.each((i, el) => {
    if (i === 2) return false; // остановка перебора после третьего элемента
});

Доступ к элементам по индексу

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

const firstItem = items[0]; // первый элемент
const lastItem = items[items.length - 1]; // последний элемент

Можно использовать метод .get(index) для получения элемента:

const thirdItem = items.get(2);

Если не передавать аргумент, .get() возвращает массив всех элементов:

const allItems = items.get(); // полноценный массив DOM-элементов

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

Метод .filter() позволяет отобрать элементы по условию:

const visibleItems = items.filter((index, element) => element.offsetParent !== null);

Можно передавать CSS-селектор, чтобы оставить только подходящие элементы:

const activeItems = items.filter('.active');

Для исключения элементов используется метод .not():

const inactiveItems = items.not('.active');

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

Метод .find() ищет потомков внутри каждого элемента коллекции:

const nestedElements = items.find('span');
  • Возвращается новая коллекция Cash.
  • Поддерживает цепочку вызовов:
items.find('span').filter('.highlight').each((i, el) => console.log(el));

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

Метод .map() позволяет создавать новые массивы на основе коллекции:

const itemTexts = items.map((i, el) => el.textContent).get();
  • Метод возвращает объект Cash, но для получения массива элементов или значений используется .get().
  • Можно применять сложные вычисления внутри функции.

Слияние и удаление элементов

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

const moreItems = $('.extra');
const combined = items.add(moreItems); // объединение коллекций

.addBack() возвращает предыдущую коллекцию после .find() или .filter():

items.find('span').addBack(); // возвращает спаны + исходные элементы

Метод .slice() позволяет работать с частями коллекции, аналогично массивам:

const middleItems = items.slice(1, 3); // элементы со 2-го по 3-й

Проверка коллекции

Метод .is() проверяет соответствие элементов селектору или условию:

if (items.is('.active')) {
    console.log('Есть активные элементы');
}

Метод .has() проверяет наличие потомков внутри элементов коллекции:

if (items.has('span')) {
    console.log('Есть спаны внутри элементов');
}

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

Для интеграции с чистым JavaScript часто требуется массив. Методы .get() и Array.from() позволяют это сделать:

const array = items.get();          // через Cash
const array2 = Array.from(items);   // стандартный JS

После этого можно применять любые методы массива, например .reduce(), .sort() или .forEach().

Итоговое использование

Комбинирование методов позволяет строить сложные цепочки:

const texts = $('.item')
    .filter(':visible')
    .find('span')
    .map((i, el) => el.textContent)
    .get();
  • Сначала фильтруются видимые элементы.
  • Затем выбираются спаны внутри них.
  • Потом извлекается текстовое содержимое.
  • И в конце создаётся обычный массив строк.

Методы работы с массивоподобными коллекциями в Cash обеспечивают гибкость и лаконичность кода, упрощая перебор, фильтрацию и преобразование DOM-элементов в привычные массивы.

Оглавление