Цикл JavaScript, упрощающий жизнь — JS Startup

Цикл JavaScript

Основная задача цикла JavaScript — повторять определенный блок кода до тех пор, пока не будет полностью выполнено определенное условие. Как я уже упоминал выше, 5 видов петли, которые мы собираемся подробно обсудить.

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

Когда разработчик говорит об итерации или итерации по строке, массиву, объекту и т. д., это фактически то же самое, что и цикл.

Цикл JavaScript — это часто используемый код в повседневных задачах и требованиях проекта, который определенно упростил жизнь. Давайте начнем подробно изучать весь цикл javascript.

Хотите узнать больше

1. Как удалить дубликаты из массива javascript
2. Как пройтись по массиву в JavaScript

1. JavaScript для цикла

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

для цикла Синтаксис

for (initialization; test condition; iteration statement) {
  // code block to be executed until test condition is true 
}

Некоторый пример Javascript для цикла

Здесь вы узнаете о некоторых вариантах использования или примерах цикла for.

Основной пример цикла for

for(let i = 0; i < 5; i++){ 
 console.log(i); 
} 
// 0, 1, 2, 3, 4

Перебрать массив с циклом for

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

const array = [10, 20, 30, 40, 50]; 
for(let i = 0; i < array.length; i++){
 console.log(array[i]); 
}
// 10, 20, 30, 40, 50

Перебрать строку с циклом for

Строка также является итерируемым значением, таким как массив до длины строки.

let name = "JS Startup"; 
for(let i = 0; i < name.length; i++){
 console.log(name[i]); 
} 
// J,S, ,S,t,a,r,t,u,p

Наконец, с помощью цикла for можно выполнять множество действий, таких как печать шаблонов, изменение значений массивов и объектов и т. д.

Примечание. Неправильный оператор в операторе цикл for иногда приводит к бесконечному циклу. >.

2. JavaScript в то время как цикл

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

Сравните с циклом for, в то время как цикл содержит только один оператор, а не 3 оператора. Но этот оператор по-прежнему существует вне или внутри цикла while.

в то время как синтаксис цикла

В приведенном ниже синтаксисе цикла while вы можете видеть, что есть только передача условия, и больше ничего. Если условие true, выполняется блок кода.

while (condition) { 
  // code block to be executed until condition return true 
}

Некоторый пример цикла Javascript while

Основной пример цикла while

let i = 0; while(i < 5){ 
  console.log(i); i++; 
} 
// 0, 1, 2, 3, 4

Перебор массива с помощью цикла while

Здесь мы используем цикл while по массиву, пока все элементы этого массива не будут напечатаны. Что означает до длины массива.

const array = [10, 20, 30, 40, 50]; 
let i = 0; 
while(i < array.length){ 
 console.log(array[i]); 
 i++; 
} 
// 10, 20, 30, 40, 50

Перебрать строку с помощью цикла while

То же самое относится и к строке, потому что строка является итерируемым значением, таким как массив.

let name = "JS Startup"; 
let i = 0; 
while(i < name.length){ 
 console.log(name[i]); 
 i++ 
} 
// J,S, ,S,t,a,r,t,u,p

Сравнение цикла for и while

Оба цикла работают одинаково, как вы можете видеть на выходе. Единственная разница заключается в размещении операторов. Но в основном все предпочитают цикл for, так как вы можете определить все операторы в одном месте.

Давайте возьмем по одному примеру каждого цикла for и цикла while, которые выглядят одинаково.

let array = ["Hi" "JS", "Startup"]; 
let i = 0; 
for (;array[i];) { 
 console.log(array[i]) 
 i++; 
} 
// Hi, JS, Startup
let array = ["Hi" "JS", "Startup"];
let i = 0; 
while (array[i]) { 
 console.log(array[i]) 
 i++; 
} 
// Hi, JS, Startup

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

3. Цикл выполнения в JavaScript

В javascript do-while — это вариант цикла while, поскольку цикл while все еще находится в do-while. Подобно циклу for и циклу while, который никогда не запускается до тех пор, пока не будет выполнено условие, в отличие от условия do-while.

синтаксис цикла do-while

do{ 
 // code block to be executed once then based on while condition 
} while (condition)

Некоторый пример цикла Javascript while

Здесь вы узнаете о некоторых вариантах использования или примерах цикла do-while. Мы можем использовать тот же пример, что и выше, но цикл while дает тот же результат, если все условия верны. Но если условие не выполняется в первый раз, то вывод изменяется.

Базовый пример цикла do-while с истинным условием

let i = 0; 
do { 
 console.log(i); 
 i++; 
} while(i < 5) 
// 0, 1, 2, 3, 4

Базовый пример цикла do-while с ложным условием

Теперь мы используем тот же пример, что и выше, но вместо 5 мы используем 0. Если это или цикл while, код даже не запускается. Но это не относится к циклу do-while.

let i = 0; 
do { 
 console.log(i); 
 i++; 
} while(i < 0) 
// 0

Как видите, мы получаем 0, потому что блок do запускается один раз, а затем проверяет условие отказа, что останавливает исполнение.

Вы можете проверить тот же сценарий с массивом и строкой, и если все в порядке, он дал тот же результат, что и цикл for и while. Но если условие возвращает false, то вывод цикла for и while не совпадает с do-while.

Добро пожаловать, новичок

Выше три цикла могут быть обнаружены в и т. Д., Но javascript также представляет два новых цикла, которые являются и потому, что мы, веб-разработчики, в основном имеем дело со значением итерируемых типов, таких как массив и объект.

Подождите, хотите больше покопаться в javascript

1. Важные методы массива Javascript, которые вы должны знать
2. Разные способы объявления функции в javascript

4. JavaScript для… цикла

В javascript цикл for…of перебирает значения итерируемых объектов, таких как массив, карта, набор, строка, аргументы и т. д.

Примечание. В этом цикле повторяются значения свойств.

for…of синтаксис цикла

Здесь у нас есть переменная, которая содержит значение итерируемого объекта, такого как массив, карта, набор и т. д. И это значение изменяется по мере повторения цикла до тех пор, пока не будет достигнута длина итерируемого объекта.

for (variable of iterable) { statement }

Некоторый пример Javascript for…of loop

Итерация строки с циклом for…of

В приведенном ниже примере мы используем строку «jsstartup», перебираем ее и получаем каждый символ отдельно.

const name = 'jsstartup'; 
for (const char of name) { 
 console.log(char); 
} 
// 'j','s','s','t','a','r','t','u','p'

Перебор массива с циклом for…of

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

const array = [10, 20, 30, 40]; 
for (const value of array) { 
 console.log(value); 
} 
// 10, 20, 30, 40

Итерация карты с циклом for…of

Объект Map является итерируемым по своим парам ключа и значения. Карта похожа на объект.

const map = new Map(); 
map.set('name', 'JS');
map.set('value', 'Startup'); 
for (const [key, value] of map) { 
 console.log(key, value); 
} 
// 'name', 'JS' 
// 'value', 'Startup'

Повторяющийся набор с циклом for…of

Объект Set является итерируемым по своим элементам. Набор похож на массив, но хранит в нем только уникальные значения.

const set = new Set(['Hi', 'Ajay', 'Yadav']); 
for (const item of set) { 
 console.log(item); 
} 
// 'Hi', 'Ajay', 'Yadav'

Перебор аргументов с помощью цикла for…of

Вы можете выполнить итерацию по объекту arguments, чтобы проверить все переданные ему параметры.

(function() { 
 for (const argument of arguments) { 
  console.log(argument); 
 } 
})(10, 20, 30); 
// 10, 20, 30

5. JavaScript для… в цикле

В javascript у вас есть так много циклов для перебора строки, массива, карты, набора, аргументов и т. д. Но как насчет объекта javascript, потому что его также нужно перебирать, как и другие.

Перед циклом for..in его очень сложно перебрать. Но теперь это просто как for…of loop. Цикл for…in перебирает свойства объекта и массива. Но с массивом не рекомендуется использовать for..in.

Примечание. В этом цикле повторяется имя свойства.

for… в синтаксисе цикла

Здесь у нас также есть переменная, но она содержит свойство объекта и массива. И это значение изменяется по мере повторения цикла до тех пор, пока не появится ключ в объекте и индекс в массиве.

for (variable in object){ 
 statement 
}

Некоторый пример Javascript для… в цикле

Здесь вы узнаете о некоторых случаях использования или примерах цикла for…in. Мы можем использовать тот же пример выше, например, используя массив и объект, но не строку.

Итерация объекта с for…in

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

const detail = { name : "JS", phone : "+91" } 
for(const property in detail){ 
 console.log(property, detail[property]); 
} 
// "name", "JS" 
// "phone", "+91"

Примечание.for...in не следует использовать для перебора массива, где важен порядок индексов. Согласно Мозилле.

Итерация массива с помощью for…in (не рекомендуется)

const array = ["JS", "Startup"]; 
for(const index in array){ 
 console.log(index, array[index]); 
} 
// "0", "JS" 
// "1", "Startup"

Наконец, я надеюсь, что вам нравятся все петли, и вы знаете, когда какую петлю использовать. Потому что с развитием технологий лучше быть в курсе.

Проверьте нашу ежедневную викторину javascript

1. JavaScript Quiz — карта массива преобразует значение элемента с помощью parseInt
2. JS Quiz — заменяет ли метод splice элемент массива
3. JS Quiz — действительно ли функция консольного лога переопределяет
4. JavaScript Quiz — удалить работу над объектом, создать метод объекта

Вывод

Чтобы принять участие в нашей викторине или задачах по javascript, учебнике, советах и ​​рекомендациях, обязательно подпишитесь на нашу рассылку jsstartup. Таким образом, вы можете участвовать в наших ежедневных задачах и изучать концепцию javascript.

И последнее, но не менее важное: не забывайте ставить лайки, комментировать и делиться. Это дает нам моральный импульс оставаться, чтобы продолжать. Также присоединяйтесь к нашей Странице Facebook

Важно. Если у вас есть какие-либо вопросы, не стесняйтесь задавать их в разделе комментариев, а также дайте мне знать, если у вас есть какие-либо предложения. Как предложения всегда приветствуются.

Если вам понравилась эта статья, пожалуйста, дайте мне хлопок.

Первоначально опубликовано на https://jsstartup.com 20 октября 2020 г.