Циклы JavaScript: как они могут сэкономить время!

Циклы в JavaScript довольно удобны, циклы позволяют нам выполнять блок кода несколько раз. Если вы хотите перебрать массив и изменить значение каждого элемента внутри массива, вы можете использовать цикл. В JavaScript есть много типов циклов, которые мы можем использовать, чтобы облегчить себе жизнь, циклы также работают с объектами.

Итак, что же такое петля?

Что такое петля?

Цикл позволяет вам повторять действие много раз.

Это позволяет:

• Просмотрите список вещей и поработайте с каждым отдельным элементом
• Повторите что-то заданное количество раз
• Продолжайте работу программы, пока пользователь не захочет ее остановить.

Как и в других языках (Ruby), вы могли встретить такой цикл:

numbers = [1, 3, 5, 7]
numbers.each { |n| puts n }

Наши результаты выглядят так:

Это каждая петля Рубина. Метод Ruby each позволяет просматривать список элементов без необходимости отслеживать количество итераций или увеличивать какой-либо счетчик.

Это рубиновый способ «повторять до конца».

В JavaScript у нас есть аналогичный цикл, который дает те же результаты, что и цикл Ruby Each. В JavaScript это называется циклом For Each Loop, давайте посмотрим, как это выглядит:

const myArray = [«яблоко», «апельсин», «виноград»];

myArray.forEach (element = ›console.log (element));

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

Так что можно задаться вопросом, а для чего еще я могу использовать циклы? Они полезны только для массивов? Что ж, друг, там может быть цикл только для вашего запроса, просто убедитесь, что вы знаете, для чего вы зацикливаете, и имеет ли цикл смысл для результата, который вы хотите получить взамен. Иногда цикл - не лучший инструмент, вам нужно сосредоточиться на том, чего вы пытаетесь достичь.

Я отвлекся, так что еще мы можем перебрать? Объекты! Всего три дня назад, начиная с сегодняшнего дня, я понятия не имел, что вы можете перебрать объект, и, честно говоря, это звучит немного пугающе, потому что есть пары ключ / значение. К счастью, JavaScript также упрощает эту задачу, есть удобный цикл, который JavaScript дает нам под названием «Цикл For / In».

Цикл For / In

Оператор JavaScript for/in просматривает свойства объекта:

node v10.16.0
My Input: var myCloset = {dress: "Red Dress", shoes:"Black Boots", hats: "Baseball Cap"}
=> undefined  
My Input: myCloset
=> { dress: 'Red Dress',
  shoes: 'Black Boots',
  hats: 'Baseball Cap' }
My Input: var text = "";
=> undefined   
My Input:var x;
=> undefined  
 for(x in myCloset){ 
.. text += myCloset[x]; 
.. }
=> 'Red DressBlack BootsBaseball Cap'

СОВЕТ: JavaScript возвращает «Не определено», если переменной не было присвоено значение. Как вы можете видеть, для переменных «text», «x» и моего объекта «myCloset» JS вернул значение undefined. Объект myCloset был создан, но до отправки он не определен, поэтому, когда я вызвал myCloset сразу после его создания, JS был удовлетворен и не выдал undefined, потому что теперь он зарегистрирован в памяти.

Мои переменные «text» и «x» также не имеют значений, поэтому они слишком неопределенные.

Давайте разберем цикл myCloset for / in и исследуем, что происходит:

for(x in myCloset){ 
.. text += myCloset[x]; 
.. }
=> 'Red DressBlack BootsBaseball Cap'

На английском языке: для переменной «x» в объекте myCloset выполните цикл и добавьте элемент, который в данный момент включен в моем счетчике x в myCloset, в текст моей переменной и верните результат.

Теперь мы получаем красивую строку со всеми значениями в свойствах myObjects. Этот метод перебирает объект, захватывает каждое значение и добавляет их все в строку, а затем возвращает ее.

Иметь ввиду:

Цикл for...in перебирает свойства объекта в произвольном порядке. Это означает, что вы не должны ожидать, что операторы for..in будут перебирать свойства вашего объекта в каком-либо определенном порядке даже между итерациями объектов с одинаковыми атрибутами. Из-за этого лучше не использовать for / in в массиве, потому что массивы имеют индексы, и может не быть гарантированного возврата индекса, когда он понадобится.

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

Лучше не добавлять, изменять или удалять свойства объекта во время итерации, кроме свойства, которое в настоящее время посещается. Нет гарантии, будет ли посещено добавленное свойство, будет ли посещено измененное свойство (отличное от текущего) до или после его изменения, или будет ли посещено удаленное свойство до того, как оно будет удалено.

В JavaScript существует множество циклов, которые могут помочь вам достичь желаемых результатов, убедитесь, что понимаете, какие циклы делают что именно и могут ли они помочь вам достичь желаемого результата. Вот несколько дополнительных полезных циклов!

Различные виды петель

JavaScript поддерживает разные виды циклов:

• for - повторяет блок кода несколько раз
• for/in - перебирает свойства объекта
• for/of - перебирает значения итерируемого объекта
• while - перебирает блок кода, пока заданное условие истинно
• do/while - также перебирает блок кода, пока заданное условие истинно

Удачного кодирования!