Циклы позволяют нам циклически перемещаться по элементам в массивах или объектах и выполнять такие действия, как их печать, изменение или выполнение других задач или действий. Существуют разные виды циклов, и цикл for в JavaScript позволяет нам перебирать коллекцию (например, массив).
В этой статье мы узнаем о forцикле, который предоставляет JavaScript. Мы рассмотрим, как for...inоператоры цикла используются в JavaScript, синтаксис, примеры того, как это работает, когда их использовать или избегать, а также какие другие типы циклов мы можем использовать вместо них.
Зачем использовать циклы For в коде JavaScript
В JavaScript, как и в других языках программирования, мы используем циклы для чтения или доступа к элементам коллекции. Коллекция может быть массивом или объектом. Каждый раз, когда оператор цикла циклически перебирает элементы в коллекции, мы называем это итерацией.
Существует два способа доступа к элементу в коллекции. Первый способ — через его ключ в коллекции, который является индексом в массиве или свойством в объекте. Второй способ — через сам предмет, без ключа.
Цикл перебирает значения свойств и значения массива
Определение цикла for...in
Цикл JavaScript forпроходит или перебирает ключи коллекции. Используя эти ключи, вы можете затем получить доступ к элементу, который он представляет в коллекции.
Набор элементов может быть массивом, объектом или даже строкой.
Синтаксис цикла for...in
Цикл forимеет следующий синтаксис или структуру:
for (let key in value) {
//do something here
}
В этом блоке кода valueнаходится набор элементов, которые мы повторяем. Это может быть объект, массив, строка и так далее. keyбудет ключом каждого элемента в value, изменяющимся на каждой итерации на следующий ключ в списке.
Обратите внимание, что мы используем letили constдля объявления key.
Для циклического перебора свойств объекта с константным ключом
Использование цикла for с объектами
При использовании for...inцикла для итерации объекта в JavaScript итерируемые ключи или свойства, которые в приведенном выше фрагменте представлены keyпеременной, являются собственными свойствами объекта.
Поскольку объекты могут наследовать элементы через цепочку прототипов, которая включает методы и свойства объектов по умолчанию, а также прототипы объектов, которые мы можем определить, мы должны использовать hasOwnProperty.
Пример цикла для итерируемого объекта
В следующем примере мы перебираем переменную obj:
const obj = {
1: «JavaScript»,
3: «PHP»,
2: «Python»,
4: «Java»
};
В цикле мы отображаем свойство и значение в
См. Pen
Looping Objects от SitePoint (@SitePoint)
на CodePen.
Обратите внимание, что порядок итерации является возрастающим для ключей (то есть, начиная с цифр в числовом порядке, а затем букв в алфавитном порядке). Однако этот порядок вывода отличается от порядка элементов в индексе, созданного при инициализации объекта.
Использование цикла for...in с массивами
При использовании for...inцикла для перебора массивов в JavaScript keyв этом случае будут индексы элементов. Однако индексы могут повторяться в случайном порядке.
Таким образом, если бы valueпеременная в for...inструктуре синтаксиса цикла, которую мы показали выше, была массивом из пяти элементов, keyне было бы гарантировано, что она будет от 0 до 4. Некоторые индексы могут предшествовать другим. Подробная информация о том, когда это может произойти, объясняется далее в этой статье.
For...in пример массива циклов
В приведенном ниже примере мы перебираем следующую переменную arr:
const arr = [«Javascript», «PHP», «Python», «Java»];
И в цикле мы отображаем индекс и значение каждого элемента массива.
См.
Массивы циклов пера от SitePoint (@SitePoint)
на CodePen.
Использование цикла for...in со строками
Вы можете перебирать строку с помощью for...inцикла JavaScript. Однако делать это не рекомендуется, так как вы будете перебирать индексы символов, а не сами символы.
Пример строки цикла for...in
В приведенном ниже примере мы перебираем следующую переменную str:
const str = «Hello, World!»;
Внутри цикла мы визуализируем ключ или индекс каждого символа и символ по этому индексу.
См.
Цикл Pen Strings от SitePoint (@SitePoint)
на CodePen.
Когда использовать цикл for...in
Давайте рассмотрим ситуации, для for...inкоторых лучше всего подходит цикл JavaScript.
Итерация объектов с помощью JavaScript for...in loop
Поскольку for...inцикл повторяет только перечисляемые свойства объекта, которые являются собственными свойствами объекта, а не свойствами, подобными toStringтем, которые являются частью прототипа объекта, для повторения объектов полезно использовать for...inцикл. Цикл for...inобеспечивает простой способ перебора свойств объекта и, в конечном счете, его значений.
Отладка с помощью цикла for...in
Еще один хороший вариант использования for...inцикла JavaScript — отладка. Например, вы можете захотеть вывести на консоль или элемент HTML свойства объекта и его значения. В этом случае for...inпетля является хорошим выбором.
При использовании for...inцикла для отладки объектов и их значений вы всегда должны помнить, что итерации не являются упорядоченными, а это означает, что порядок элементов, которые повторяет цикл, может быть случайным. Таким образом, порядок доступа к свойствам может быть не таким, как ожидалось.
Когда не использовать JavaScript для... в цикле
Теперь давайте рассмотрим ситуации, когда for...inцикл — не лучший вариант.
Упорядоченная итерация массивов
Поскольку при использовании цикла порядок индексов в итерациях не гарантируется for...in, рекомендуется не выполнять итерацию массивов, если необходимо поддерживать порядок.
Это особенно важно, если вы хотите поддерживать такие браузеры, как IE, которые выполняют итерации в порядке создания элементов, а не в порядке индексов. Это отличается от того, как работают современные браузеры, которые перебирают массивы на основе индексов в порядке возрастания.
Так, например, если у вас есть массив из четырех элементов и вы вставляете элемент в позицию три, в современных браузерах for...inцикл все равно будет перебирать массив в порядке от 0 до 4. В IE при использовании for...inцикла он будет повторять четыре элемента, которые изначально были в массиве в начале, а затем достигают элемента, который был добавлен в позицию три.
Внесение изменений во время итерации
Любое добавление, удаление или изменение свойств не гарантирует упорядоченную итерацию. for...inСледует избегать внесения изменений в свойства в цикле. В основном это связано с его неупорядоченным характером.
Таким образом, если вы удалите элемент до того, как достигнете его в итерации, этот элемент вообще не будет посещен во всем цикле.
Точно так же, если вы вносите изменения в свойство, это не гарантирует, что этот элемент не будет повторно просмотрен. Таким образом, если свойство изменено, оно может быть посещено в цикле дважды, а не один раз.
Кроме того, если свойство добавляется во время итерации, оно может быть или не быть посещено во время итерации вообще.
Вот пример добавления элемента в for...inцикл. Мы можем увидеть результат первого цикла, а затем второго после добавления в первом цикле.
См.
добавление пера в Object Loop от SitePoint (@SitePoint)
на CodePen.
Как видно из приведенного выше примера, добавленные элементы не повторялись.
Альтернативы циклам For в JavaScript
Итак, в тех ситуациях, когда for...inцикл не лучший вариант, что вы должны использовать вместо него? Давайте взглянем.
Использование цикла for с массивами
Использование forцикла никогда не будет ошибкой! Цикл JavaScript for— один из самых основных инструментов для циклического обхода элементов массива. Цикл forпозволяет вам полностью контролировать индексы при переборе массива.
Это означает, что при использовании forцикла вы можете перемещаться вперед и назад, изменять элементы в массиве, добавлять элементы и т. д., сохраняя при этом порядок массива.
Следующий оператор создает цикл, который перебирает массив и выводит его значения на консоль.
for (let i = 0; i < arr.length; i++) {
console.log (arr[i]) ;
}
forEach метод для массивов и объектов
forEach в JavaScript — это метод для прототипов массивов, который позволяет нам перебирать элементы массива и их индексы в функции обратного вызова.
Функции обратного вызова — это функции, которые вы передаете другому методу или функции для выполнения в рамках выполнения этого метода или функции. Когда дело доходит до forEachJavaScript, это означает, что функция обратного вызова будет выполняться для каждой итерации, получая текущий элемент в итерации в качестве параметра.
Например, следующий оператор перебирает переменную arrи выводит ее значения в консоль с помощью forEach:
arr.forEach ((value) => console.log (value));
Вы также можете получить доступ к индексу массива:
arr.forEach ((value, index) => console.log (value, index));
Циклы JavaScript forEachтакже можно использовать для перебора объектов с помощью Object.keys (), передавая ему объект, который вы хотите перебрать, который возвращает массив собственных свойств объекта:
Object.keys (obj).forEach ((key) => console.log (obj[key]));
В качестве альтернативы вы можете forEachнапрямую перебирать значения свойств, если вам не нужен доступ к свойствам с помощью Object.values ():
Object.values (obj).forEach ((value) => console.log (value));
Обратите внимание, что Object.values () возвращает элементы в том же порядке, что и for...in.
Заключение
Используя for...inцикл JavaScript, мы можем перебирать ключи или свойства объекта. Это может быть полезно при повторении свойств объекта или для отладки, но его следует избегать при повторении массивов или внесении изменений в объект. Я надеюсь, что приведенные выше примеры и пояснения были вам полезны.
