for...of и for...in
В for и while счётчик вы вели сами. Часто данные уже список или объект — нужны каждое значение или каждый ключ, а не самодельный индекс. for...of даёт следующее значение из итерируемого. for...in даёт следующий ключ объекта. Та же семья повторов; в переменной цикла лежит другое.
Что делает for...of?
Тело выполняется один раз на каждое значение итерируемого. Для новичка массивы и строки — повседневные случаи. Пишете for (const item of list) — в каждом круге item это следующее значение. i < list.length пишите только если сознательно нужен цикл по индексу.
for...of, for...in и классические циклы
📊 Повседневные формы обхода
| Форма | Что держит переменная цикла | Когда уместно |
|---|---|---|
for...of |
значение из итерируемого | каждый фрукт в массиве; каждый символ в строке |
for...in |
ключ (имя свойства) объекта | каждое имя поля простого объекта |
классический for |
индекс, которым вы управляете | когда нужна цифра 0, 1, 2… |
while |
то, что обновляете в теле | пока действует одно правило |
Для for...of начните с массивов. Берите for...in, когда история — «каждое имя свойства этого объекта». Классический for оставляйте, когда важен сам индекс.
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}
Обход значений массива
Каждый круг печатает строку: red, затем green, затем blue. Переменная цикла — само значение, не 0, 1, 2. Если нужны только элементы, for...of короче управления индексом.
const word = "hi";
for (const ch of word) {
console.log(ch);
}
Обход символов строки
Строки тоже итерируемы. Печатается h, затем i. Считайте каждый символ одним значением — удобно для простой посимвольной работы до тяжёлых строковых API.
const user = { name: "Ada", role: "dev" };
for (const key in user) {
console.log(key + "=" + user[key]);
}
Обход ключей с for...in
Здесь key сначала "name", потом "role". Значение читаете через user[key]. Для перечислимых ключей простых объектов предпочитайте for...in. Не делайте его первым инструментом для значений массива — для этого есть for...of.
Короткое правило: of → значения, in → ключи. Путать их — классическая ошибка новичка.
const parts = ["A", "B", "C"];
let msg = "";
for (const p of parts) {
msg = msg + p + "-";
}
console.log(msg.slice(0, -1));
Соберите сообщение из значений
Каждый круг добавляет букву и дефис. После цикла slice убирает хвостовой дефис — видно A-B-C. Та же идея склейки, что в прошлых уроках о циклах — теперь обход идёт прямо по значениям.
const nums = [10, 20, 30];
for (let i = 0; i < nums.length; i++) {
console.log("i=" + i + " value=" + nums[i]);
}
for (const n of nums) {
console.log("value=" + n);
}
Когда индексный цикл ещё помогает
Классический for печатает и индекс, и значение. for...of — только значения. Нужен номер позиции? Оставьте индексный for. Нужны только элементы? Предпочитайте for...of.
Покажите for...of на странице
Обойдите массив через for...of, соберите короткую строку, запишите её на страницу.
<!DOCTYPE html>
<html>
<head>
<title>for...of — page list</title>
</head>
<body>
<p id="out">…</p>
<script>
const items = ["tea", "milk", "honey"];
let line = "";
for (const item of items) {
line = line + item + " ";
}
let box = document.getElementById("out");
box.textContent = "list=" + line.trim();
</script>
</body>
</html>
Страница показывает list=tea milk honey. Смените один элемент массива, обновите страницу, прочитайте новую строку. for...of для значений, for...in для ключей объекта, классический for когда важен индекс. Дальше — break и continue, чтобы направлять цикл на середине пути.
Попробуйте сами
- Через
for...ofвыведите каждый элемент["a", "b", "c"]. - Через
for...ofвыведите каждый символ"ok". - Через
for...inпо{ x: 1, y: 2 }выведитеkey=value. - Склейте
["1", "2", "3"]в1-2-3черезfor...of. - Напишите индексный
for, который печатает индекс и значение рядом. - В HTML-демо смените только массив, обновите, прочитайте
list=.
Частые ошибки
- Писать
for...in, когда нужны значения массива (for...of) - Ставить
for...ofна простой объект (для новичка он так не итерируется) - Ждать от
for...ofиндексы0,1,2— он даёт значения, не индексы - После
for...inзабыватьuser[key]и логировать только ключи, когда нужны и значения - Длинный индексный цикл, когда ясный
for...ofчитается лучше
Кратко
for...ofобходит значения итерируемых (массивы, строки)for...inобходит ключи объектов- Классический
forуместен, когда нужен номер индекса whileуместен для одного продолжающегося условия- Собирайте сообщения, дописывая значения в теле
- Дальше: break и continue — остановить или пропустить круг
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху