Автор оригинала: FreeCodeCamp Community Member.
Zell Liew
Допустим, вы хотите запустить функцию, Банкибол , четыре раза. Как бы вы это сделали? Нравится?
function bounceBall() { // bounce the ball here } bounceBall() bounceBall() bounceBall() bounceBall()
Этот подход отлично, если вам нужно Банкибол только в течение нескольких раз. Что произойдет, если вам нужно Банкибол на сто раз?
Лучший путь через для петля.
Петля ‘для’
для Цикл запускает блок кода столько раз, сколько вы хотите. Вот а для цикла, которая работает Банкибол десять раз:
for (let i = 0; i < 10; i++) { bounceBall() }Это сломано на четыре части – ИНВИЗАЛОКСПРЕССИЯ , состояние , incrementalexpression и заявление :
for (initialExpression; condition; incrementExpression) { statement }Прежде чем петь, вам нужно иметь заявление Отказ Это утверждение является блок кода, который вы хотели бы работать несколько раз. Вы можете написать любое количество строк кода здесь. Вы можете даже использовать функции.
Вот что для петля выглядит как с Банкибол Как его утверждение:
for (initialExpression; condition; incrementExpression) { bounceBall() }Далее вам нужен начальное выражение начать петлю. Это где вы объявляете переменную. Для большинства петель эта переменная называется i . Это также установлено на 0.
Вот как это будет выглядеть, когда вы помещаете ИНВИЗАЛОКСПРЕССИЯ в для петля:
for (let i = 0; condition; incrementExpression) { bounceBall() }После оператора прогон, переменная, Я увеличивается или уменьшается. Вы увеличиваете или уменьшите значение Я в Приращение выражения Отказ
Увеличить стоимость Я К одному, вы переназнаете Я Такое, что это становится I + 1 с Я + 1 Отказ Снаряжение для этой переназначения – I ++ , что вы найдете в большинстве для петли.
Уменьшить значение Я К одному, вы переназнаете Я Такое, что это становится Я - 1 с Я - 1 Отказ Снаряжение для этой переназначения – Я ... , что является еще одним вариантом того, что вы найдете в большинстве для петли.
В Банкибол Пример выше, мы увеличили переменную Я К одному каждый раз код работает:
for (let i = 0; condition; i++) { bounceBall() }Но вы должны увеличить или уменьшить Я ?
Ответ лежит в Состояние Отказ Это заявление о состоянии оценивается либо на правда или ложный . Если утверждение оценивает правда , утверждение работает.
Когда оператор работает RAN, JavaScript запускает выражение приращения и проверяет, оценивает ли условие для правда опять таки. Это повторяет этот процесс, пока состояние не оценится к ложь Отказ
Как только условие оценит к ложь JavaScript пропускает петлю и движется с остальной частью вашего кода.
Итак, если вы не хотите запустить цикл, вы можете установить условие, которое сразу оценивает ложь:
// This loop will not run since the condition evaluates to false for (let i = 0; i < 0; i++) { bounceBall() const timesBounced = i + 1 console.log('The ball has bounced ' + timesBounced + ' times') } // You will only see this console.log('next line of code')Если вы хотите цикл к пройти дважды Вы изменяете состояние так, чтобы он оценивает ложь, когда выражение приращения выполняется дважды.
// This loop will run twice for (let i = 0; i < 2; i++) { bounceBall() const timesBounced = i + 1 console.log('The ball has bounced ' + timesBounced + ' times')") } console.log('next line of code')Если вы хотите цикл к пройти десять раз Вы изменяете состояние такого, что он оценивает false, когда выражение приращения проходит десять раз.
// This loop will run ten times for (let i = 0; i < 10; i++) { bounceBall() const timesBounced = i + 1 console.log('The ball has bounced ' + timesBounced + ' times')") } console.log('next line of code')Бесконечные петли
Бесконечные петли происходят, когда Состояние Для вашего для петли всегда возвращаются правда Отказ Ваш браузер будет зависать, если запустите бесконечный цикл.
Чтобы восстановить из бесконечной петли, вам нужно убедить вашего браузера. На MAC это означает, что вы щелкнуте правой кнопкой мыши на значке браузера и выберите «Заставить выйти». На автомате окна вы открываете диспетчер задач Windows с Ctrl + Alt + дель Выберите свой браузер и нажмите «Конечную задачу».
Зацикливаться через массивы
На практике вы почти никогда не пишете петлю, которая проходит в десять раз, как в Банкибол Пример выше. Вы всегда будете петли через массив или объект.
Когда вы зацикливаете (или итерацию) через массив, вы проходите каждый элемент в массиве один раз. Для этого вы можете использовать длину или массив в качестве условия:
const fruitBasket = ['banana', 'pear', 'guava']
// fruitBasket.length is 3 for (let i = 0; i < fruitBasket.length; i++) { console.log("There's a " + fruitBasket[i] + " in the basket") } // => There's a banana in the basket // => There's a pear in the basket // => There's a guava in the basket
Альтернативный способ написать это для Цикл – использовать негативное выражение приращения. Эта версия работает немного быстрее, чем для Цикл выше, но вместо этого циклат массив с конца.
for (let i = fruitBasket.length - 1; i >= 0; i--) { console.log("There's a " + fruitBasket[i] + " in the basket") } // => There's a guava in the basket // => There's a pear in the basket // => There's a banana in the basket
Зацикливаться через массивы с “для” для “
Еще один (намного лучше) путь к петлю через массив – использовать для ... из петля. Это новый синтаксис петлей, который поставляется с ES6. Похоже, это выглядит:
const fruitBasket = ['banana', 'pear', 'guava']
for (let fruit of fruitBasket) { console.log(fruit) } // => There's a banana in the basket // => There's a pear in the basket // => There's a guava in the basket
для ... из петля предпочтительнее стандарта для Цикл, потому что он всегда петляет через массив один раз. Там нет необходимости писать array.length , что делает ваш код намного легче читать и поддерживать.
Вы можете использовать для ... из с любым повторным объектом. Это объекты, которые содержат Символ. Завестер имущество. Массивы - это такой объект. Если вы console.log Пустой массив, вы увидите, что у него есть Символ Как один из его клавиш (в пределах массива __proto__ Ключ):
Логика в циклах
Вы можете использовать Если/else или любая другая логика внутри цикла.
Например, скажем, у вас есть список номеров, и вы хотите создать второй список номеров, которые меньше, что 20.
Чтобы завершить эту цель, вы сначала петлю через цифры.
const numbers = [25, 22, 12, 56, 8, 18, 34]
for (let num of numbers) { // do something here }Здесь вы хотите проверить, если каждый Номер меньше 20.
const numbers = [25, 22, 12, 56, 8, 18, 34]
for (let num of numbers) { if (num < 20) { // do something } }Если Num меньше 20, вы хотите добавить его в другой массив. Для этого вы используете толчок метод.
const numbers = [25, 22, 12, 56, 8, 18, 34]let smallerThan20 = []
for (let num of numbers) { if (num < 20) { smallerThan20.push(num) } } // smallerThan20 === [12, 8 , 18]
Упаковка
А для Цикл используется, когда вы хотите выполнить одну и ту же задачу (или набор задач) несколько раз.
Вы бы редко петли через код именно в десять раз. Обычно вы захотите зацикливаться через массив вместо этого.
Чтобы петить через массив ровно один раз, вы можете использовать для ... из Цикл, который гораздо проще писать и понять по сравнению с традиционным для петля.
Помните, вы можете написать любое количество логики, которую вы хотите в петлях. Вы можете использовать функции, Если/else утверждения или даже используют петли в петлях.
Если вы любили эту статью, вам понравится учиться Учите JavaScript – курс, который помогает вам научиться Создайте реальные компоненты с нуля с JavaScript. Нажмите здесь, чтобы узнать больше о изучении JavaScript если тебе интересно.
(О, кстати, если вам понравилась эта статья, я был бы признателен, если бы вы могли поделиться этим .?)
Первоначально опубликовано zellwk.com .
Оригинал: “https://www.freecodecamp.org/news/javascript-essentials-how-to-wrap-your-head-around-for-loops-64e1a7248c9e/”