JavaScript - For...in Цикл: Пособие для начинающих

Здравствуйте, будущий программист! Сегодня мы погрузимся в один из полезных инструментов JavaScript: цикл for...in. Не волнуйтесь, если вы еще ни разу не писали код — я проведу вас через это шаг за шагом, как я делал это для countless студентов на протяжении многих лет了我的 преподавания. Так что возьмите杯 кофе (или чая, если это ваше дело), и давайте начнем!

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

Прежде чем мы перейдем к деталям, давайте поймем, что такое цикл for...in. Представьте, что у вас есть большая коробка с игрушками (в JavaScript мы назовем эту коробку "объектом"). Цикл for...in как魔法стая рука, которая достает одну игрушку за другой, позволяя вам xem каждого individually.

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

Синтаксис цикла for...in

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

for (let key in object) {
// код для выполнения
}

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

• for: Это ключевое слово говорит JavaScript, что мы начинаем цикл.
• let key: Это создает переменную (мы называем ее key здесь), которая будет хранить имя каждого свойства по мере прохождения объекта.
• in: Это ключевое слово separates имя переменной от объекта, по которому мы итерируемся.
• object: Это объект, который мы хотим осмотреть.
• Круглые скобки {} содержат код, который будет выполняться для каждого свойства в объекте.

Примеры использования цикла for...in в действии

Пример 1: Исследование простого объекта

Давайте начнем с простого примера. Представьте, что у нас есть объект, представляющий книгу:

let book = {
title: "Великий Гэтсби",
author: "Ф. Скотт Фицджеральд",
year: 1925
};

for (let property in book) {
console.log(property + ": " + book[property]);
}

Если мы выполним этот код, вот что мы увидим в консоли:

title: Великий Гэтсби
author: Ф. Скотт Фицджеральд
year: 1925

Что здесь происходит? Наш цикл for...in итерируется по каждому свойству объекта book. Для каждого цикла:

• property содержит имя текущего свойства ("title", "author" или "year").
• book[property] дает нам значение этого свойства.
• Мы используем console.log() для вывода как имени свойства, так и его значения.

Пример 2: Подсчет свойств

Давайте представим, что мы хотим посчитать, сколько свойств у объекта:

let car = {
make: "Toyota",
model: "Corolla",
year: 2020,
color: "blue"
};

let propertyCount = 0;

for (let prop in car) {
propertyCount++;
}

console.log("Объект car имеет " + propertyCount + " свойств.");

Это выведет: "Объект car имеет 4 свойства."

В этом примере мы используем цикл for...in для прохождения каждого свойства объекта car. Вместо того чтобы что-то делать со свойствами самими по себе, мы просто увеличиваем счетчик каждый раз, когда запускается цикл. Это дает нам общее количество свойств в объекте.

Пример 3: Фильтрация свойств

Иногда вам может понадобиться сделать что-то только с определенными свойствами. Давайте рассмотрим пример:

let person = {
name: "Алиса",
age: 30,
city: "Нью-Йорк",
job: "Инженер",
hobby: "живопись"
};

console.log("Свойства, начинающиеся с 'j':");
for (let prop in person) {
if (prop.startsWith('j')) {
console.log(prop + ": " + person[prop]);
}
}

Это выведет:

Свойства, начинающиеся с 'j':
job: Инженер

В этом примере мы используем цикл for...in для прохождения всех свойств объекта person, но мы выводим только те свойства, которые начинаются с буквы 'j'. Мы используем метод startsWith() для проверки этого условия.

Common Methods Used with for...in Loops

Here's a table of some common methods you might use in conjunction with for...in loops:

Method	Description	Example
hasOwnProperty()	Checks if the property is directly on the object (not inherited)	if (object.hasOwnProperty(property))
Object.keys()	Returns an array of an object's own enumerable property names	Object.keys(object)
Object.values()	Returns an array of an object's own enumerable property values	Object.values(object)
Object.entries()	Returns an array of an object's own enumerable string-keyed property [key, value] pairs	Object.entries(object)

Заключение

И вот вы уже сделали свои первые шаги в мир циклов for...in. Помните, как и при обучении езде на велосипеде, программирование требует практики. Не отчаивайтесь, если это не сработает сразу — продолжайте экспериментировать с различными объектами и смотрите, что вы можете сделать с циклами for...in.

Как мы говорим в мире программирования: "Единственный способ научиться программировать — это программировать!" Так почему бы не попробовать создать свои собственные объекты и использовать циклы for...in для их исследования? Может быть, создайте объект, представляющий ваш любимый фильм или книгу, и посмотрите, что вы можете с ним сделать.

Счастливого кодирования и помните — каждый expert когда-то был начинающим. Продолжайте тренироваться, и перед тем как вы это заметите, вы будете循环 через объекты, как профессионал!

Credits: Image by storyset