RU(Русский) Translate

Добро пожаловать, стремящиеся программисты! Сегодня мы погрузимся в одну из самых полезных функций JavaScript: цикл for...of. Как ваш доброжелательный сосед по компьютерной науке, я рад помочь вам в этом путешествии. Так что возьмите любимый напиток, устройтесь поудобнее и отправляйтесь в это кодирование приключение вместе с нами!

Что такое цикл for...of?

Прежде чем мы углубимся в детали, давайте поймем, что такое цикл for...of. Представьте, что у вас есть корзина с яркими фруктами, и вы хотите осмотреть каждый фрукт по одному. Цикл for...of похож на вашего полезного помощника, который берет каждый фрукт из корзины и передает его вам по одному, пока корзина не опустеет.

В программировании цикл for...of позволяет нам итерироваться (фancy слово для "пройти через") над итерируемыми объектами, такими как массивы, строки и другие структуры данных, о которых мы узнаем позже.

Синтаксис

Теперь давайте посмотрим, как мы пишем цикл for...of. Не волнуйтесь, если сначала это покажется странным - мы разберем это вместе!

for (variable of iterable) {
    // код для выполнения
}

Давайте разберем это:

• for: Это ключевое слово говорит JavaScript, что мы начинаем цикл.
• variable: Это то место, где мы будем хранить каждый элемент по мере прохождения итерируемого объекта.
• of: Это ключевое слово делает этот цикл for...of.
• iterable: Это объект, через который мы проходим (например, наша корзина фруктов).
• Код внутри фигурных скобок {} - это то, что мы хотим сделать с каждым элементом.

Примеры

Пример 1: Цикл по массиву

Давайте начнем с простого примера. Мы создадим массив фруктов и напечатаем каждый из них.

let fruits = ['apple', 'banana', 'cherry', 'date'];

for (let fruit of fruits) {
    console.log(fruit);
}

Если вы запустите этот код, вы увидите:

apple
banana
cherry
date

Что здесь происходит? Наш цикл for...of берет каждый фрукт из массива fruits и хранит его в переменной fruit. Затем мы используем console.log() для печати каждого фрукта.

Пример 2: Цикл по строке

Знаете ли вы, что строки также итерируемы? Давайте напишем слово:

let word = 'Hello';

for (let letter of word) {
    console.log(letter);
}

Это выведет:

H
e
l
l
o

Каждый символ в строке treated как отдельный элемент, который мы можем проити. Круто, правда?

Пример 3: Использование for...of с числами

Теперь давайте перейдем к более практическим вещам. Представьте, что вы учитель (как я!) и хотите вычислить средний балл для класса:

let scores = [85, 92, 78, 95, 88];
let total = 0;
let count = 0;

for (let score of scores) {
    total += score;
    count++;
}

let average = total / count;
console.log(`Средний балл класса ${average}`);

Этот скрипт вычислит и выведет средний балл. Мы используем цикл for...of для суммирования всех баллов и подсчета их количества.

Пример 4: Выход из цикла

Иногда вы можете хотите停止 цикл до его окончания. Мы можем сделать это с помощью ключевого слова break. Давайте представим, что мы ищем определенный фрукт:

let fruits = ['apple', 'banana', 'cherry', 'date'];
let searchFor = 'cherry';

for (let fruit of fruits) {
    if (fruit === searchFor) {
        console.log(`Найден ${searchFor}!`);
        break;
    }
    console.log(`Проверяем ${fruit}...`);
}

Этот скрипт остановится, как только найдет 'cherry', не проверяя оставшиеся фрукты.

Пример 5: Пропуск элементов с continue

Что, если мы хотим пропустить某些 элементы? Мы можем использовать ключевое слово continue. Давайте напечатаем только фрукты, начинающиеся с 'a':

let fruits = ['apple', 'banana', 'apricot', 'cherry', 'avocado'];

for (let fruit of fruits) {
    if (!fruit.startsWith('a')) {
        continue;
    }
    console.log(fruit);
}

Это напечатает только 'apple', 'apricot' и 'avocado'.

Таблица методов

Вот удобная таблица методов, которые мы использовали в наших примерах:

Метод	Описание	Пример
console.log()	Выводит данные в консоль	console.log('Привет, мир!')
startsWith()	Проверяет, начинается ли строка с указанных символов	'apple'.startsWith('a') // true
break	Выход из цикла	if (условие) break;
continue	Перейти к следующей итерации цикла	if (условие) continue;

Заключение

И вот мы добрались до конца, друзья! Мы прошли через страну циклов for...of, от простых массивов до строк, и даже научились выходить или пропускать элементы. Помните, что практика делает мастера, так что не бойтесь экспериментировать с этими концепциями.

За годы преподавания я понял, что лучший способ учиться - это делать. Так что у меня для вас есть маленькое домашнее задание: Попробуйте создать свои собственные циклы for...of с разными типами данных. Может быть, пройдитесь по своим любимым фильмам или именам друзей. Возможности безграничны!

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

Credits: Image by storyset