Итерация по массивам и объектам

Zepto.js предоставляет удобные методы для работы с коллекциями элементов, массивами и объектами, упрощая выполнение типичных операций без необходимости использовать громоздкие циклы. Основой большинства итераций в Zepto является метод $.each, который сочетает универсальность и лаконичность.

Метод $.each для массивов

Синтаксис метода для массивов:

$.each(array, function(index, value) {
    // тело функции
});
  • array — массив, по которому выполняется итерация.
  • index — текущий индекс элемента массива.
  • value — значение текущего элемента.

Пример:

var numbers = [10, 20, 30, 40];

$.each(numbers, function(index, value) {
    console.log('Индекс: ' + index + ', Значение: ' + value);
});

В этом примере каждый элемент массива numbers обрабатывается последовательно, а функция обратного вызова получает и индекс, и значение.

Особенности работы с $.each для массивов:

  1. Можно прерывать цикл, возвращая false из функции обратного вызова.
  2. this внутри функции ссылается на текущий элемент массива.
$.each(numbers, function(index, value) {
    if (value === 30) return false; // прерывание цикла
    console.log(value);
});

Итерация по объектам

Метод $.each также работает с объектами, где вместо индекса используется имя свойства:

$.each(object, function(key, value) {
    // тело функции
});

Пример:

var person = {
    name: "Иван",
    age: 25,
    profession: "Разработчик"
};

$.each(person, function(key, value) {
    console.log(key + ': ' + value);
});

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

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

  • Возврат false из функции также прекращает итерацию по объекту.
  • Порядок обхода свойств объектов не гарантирован, так как он зависит от реализации JavaScript.

Метод map для преобразования коллекций

Zepto поддерживает метод map, который позволяет преобразовать элементы массивов или коллекций DOM:

var result = $.map(array, function(value, index) {
    return value * 2; 
});

Результатом является новый массив с изменёнными значениями:

console.log(result); // [20, 40, 60, 80]

Особенности $.map:

  • Возвращаемое значение null или undefined исключает элемент из нового массива.
  • Поддерживает вложенные массивы, автоматически их разворачивая.
var nested = [1, [2, 3], 4];
var flattened = $.map(nested, function(value) { return value; });
console.log(flattened); // [1, 2, 3, 4]

Итерация по коллекциям DOM

Zepto расширяет итерацию на коллекции элементов, подобно jQuery:

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

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

  • Внутри each для коллекции DOM this автоматически ссылается на текущий элемент.
  • Параметры index и element позволяют одновременно использовать порядковый номер и сам элемент.
  • Можно комбинировать с методами map для создания новых массивов значений из коллекции DOM.

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

var texts = $('p').map(function(index, element) {
    return $(element).text();
}).get(); // .get() преобразует коллекцию в обычный массив

Советы по производительности

  1. Для больших массивов использование $.each может быть медленнее нативного for или forEach. Zepto оптимизирован для компактного кода и удобства работы с DOM.
  2. Методы map и each возвращают разные типы: map создаёт массив, each возвращает исходную коллекцию, что удобно для цепочек методов.
  3. При работе с объектами избегать изменения свойств во время итерации, чтобы не вызвать непредсказуемое поведение.

Итоговая таблица методов итерации

Метод Применение Возвращаемое значение Особенности
$.each Массивы и объекты Исходный массив или объект Можно прервать с false
$.map Массивы и коллекции DOM Новый массив null/undefined исключает элемент
each (DOM) Коллекции элементов DOM Исходная коллекция Zepto this = текущий элемент

Эти методы делают Zepto удобным инструментом для перебора и преобразования данных в массиве, объекте или DOM-коллекции, обеспечивая лаконичный и читаемый код.

Оглавление