Обход массива в jQuery: примеры итерации и метод split()

Быстрый ответ

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

var items = ["A", "B", "C"];
$.each(items, function(index, value) {
  console.log(index + ": " + value);
});

После выполнения данного кода, в консоли вы получите индексы и соответствующие им значения каждого элемента массива.

К тому же, вы можете использовать современные методы JavaScript, вроде Array.prototype.forEach или цикл ES2015 for...of, которые облегчают чтение и понимание кода.

Взгляд на альтернативы из JavaScript

Если в вашем проекте не обязательно использование jQuery, вам стоит обратить внимание на следующие современные способы обхода массивов, что может сделать ваш код более лаконичным и приятным для восприятия.

Метод

items.forEach(function(value, index) {
  console.log(index + ": " + value);
});

Данный метод осуществляет декларативный перебор массива и позволяет избежать использования классических циклов

со всеми их переменными счетчиками и граничными условиями.

Цикл ES6

for (let value of items) {
  console.log(value);
}

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

Почему следует избегать цикла for...in?

Цикл for...in нередко становится источником ошибок. Он изначально предназначен для перебора свойств объектов, вместо массивов.

Если вы все же решили использовать его для работы с массивами, будьте готовы к тому, что он вернет строковые индексы и выведет все наследуемые свойства. Для того чтобы избежать этого, используйте метод hasOwnProperty:

for (var index in items) {
  if (items.hasOwnProperty(index)) {
    console.log(items[index]);
  }
}

Визуализация

Процесс обхода массива в jQuery можно сравнить с вечеринкой, на которой вы, перебирая гостей, знакомитесь с каждым из них, то есть с элементами массива:

Список гостей (📜): [👩‍💼, 👨‍🚀, 👩‍🚒, 👨‍🔬]

В каждом шаге цикла вы познакомитесь с новым гостем:

$.each(guestList, function(index, guest) {
    console.log('Добро пожаловать, ' + guest.name + '!'); 
});

1-й этап: "Добро пожаловать, Женщина-бизнесмен!" 👩‍💼
2-й этап: "Добро пожаловать, Астронавт!" 👨‍🚀
3-й этап: "Добро пожаловать, Пожарный!" 👩‍🚒
4-й этап: "Добро пожаловать, Учёный!" 👨‍🔬

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

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

Рассмотрим некоторые способы оптимизации циклов, которые позволят увеличить скорость обработки данных.

Сохраните длину массива

В классических циклах for может быть полезным сохранение длины массива в отдельной переменной:

for(var i = 0, length = items.length; i < length; i++) {
  console.log(items[i]);
}

Эта рекомендация поможет вам избежать повторного вычисления длины массива на каждой итерации.

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

Если вам необходимо работать со строковыми данными, то перед началом работы преобразуйте строки в массив с помощью метода .split():

var stringData = "A,B,C";
var items = stringData.split(",");
// Теперь массив 'items' готов к перебору.

Изучение

Понимание параметров для callback-функции

Функция обратного вызова $.each() требует два параметра: индекс (позиция элемента в массиве) и значение (сам элемент массива):

$.each(items, function(index, value) {
  // 'index' – это позиция элемента в массиве
  // 'value' – это сам элемент, готовый к использованию
});

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

Внутри callback-функции переменная this ссылается на текущий элемент массива:

$.each(items, function() {
  console.log(this); // Здесь 'this' эквивалентно 'value'
});