Карта сайта

Урок 13: Циклы по массивам и объектам в JavaScript’е

/Уроки по JavaScript/Урок 13: Циклы по массивам и объектам в JavaScript’е
Урок 13: Циклы по массивам и объектам в JavaScript’е
Автор: написал в рубрике Уроки по JavaScript. 0 Комментариев.

Сегодня мы разберем одну из ключевых тем в JavaScript, это циклы для работы с массивами и объектами. Они фундаментальный навык, который позволит вам эффективно обрабатывать данные, автоматизировать рутинные операции и писать более чистый и понятный код. Мы изучим три основных подхода: for...of для массивов, for...in для объектов и метод forEach(). В конце вас ждут практические задачи и примеры кода.

Цикл for…of для массивов

Зачем нужен for…of?

Цикл for...of появился в ES6 (ECMAScript 2015) и стал удобной заменой классическому for для работы с массивами и другими итерируемыми структурами. Его главное преимущество, простота синтаксиса. Больше не нужно управлять счетчиками вручную!

Синтаксис

for (const элемент of массив) {
  // действия с элементом
}

Примеры использования

Пример: Вывод элементов массива

const fruits = ['яблоко', 'банан', 'апельсин'];

for (const fruit of fruits) {
  console.log(fruit);
}
// Вывод: яблоко, банан, апельсин

Пример: Суммирование элементов

const numbers = [10, 20, 30];
let sum = 0;

for (const num of numbers) {
  sum += num;
}

console.log(sum); // 60

Пример: Поиск элемента

const languages = ['JavaScript', 'Python', 'Ruby'];
let found = false;

for (const lang of languages) {
  if (lang === 'Python') {
    found = true;
    break; // выход из цикла
  }
}

console.log(found ? 'Найден!' : 'Нет такого'); // Найден!

Когда использовать for…of?

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

Ограничения

  • Не работает с объектами (для них есть for...in).
  • Не предоставляет доступ к индексу элемента (для этого используйте обычный for или forEach()).

Часть 2: Цикл for…in для объектов

Зачем нужен for…in?

Цикл for...in предназначен для перебора свойств объекта. Он позволяет получить ключи объекта, чтобы затем работать с их значениями.

Синтаксис

for (const ключ in объект) {
  // действия с ключом и объектом[ключ]
}

Примеры использования

Пример: Вывод ключей и значений

const user = {
  name: 'Максим',
  age: 30,
  isAdmin: true
};

for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}
// Вывод:
// name: Максим
// age: 30
// isAdmin: true

Пример: Подсчет свойств объекта

const car = {
  brand: 'Toyota',
  model: 'Camry',
  year: 2020
};

let count = 0;

for (const prop in car) {
  count++;
}

console.log(`У объекта car ${count} свойства`); // 3

Пример: Проверка собственных свойств
Иногда for...in захватывает унаследованные свойства из цепочки прототипов. Чтобы этого избежать, используйте hasOwnProperty():

const animal = {
  legs: 4,
  eyes: 2
};

// Добавим метод в прототип
animal.__proto__.tail = true;

for (const key in animal) {
  if (animal.hasOwnProperty(key)) {
    console.log(key); // legs, eyes (tail не выведется)
  }
}

Когда использовать for...in?

  • Для перебора свойств объектов.
  • Для отладки, чтобы проверить содержимое объекта.
  • В сочетании с hasOwnProperty(), чтобы избежать унаследованных свойств.

Ограничения

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

Метод .forEach()

Зачем нужен forEach()?

Метод forEach() позволяет выполнить функцию для каждого элемента массива. Это более декларативный подход, чем классические циклы, и он лучше вписывается в современный JavaScript.

Синтаксис

массив.forEach(function(элемент, индекс, массив) {
  // действия
});

Примеры использования

Пример: Вывод элементов с индексами

const colors = ['красный', 'зеленый', 'синий'];

colors.forEach((color, index) => {
  console.log(`Цвет ${index + 1}: ${color}`);
});
// Вывод:
// Цвет 1: красный
// Цвет 2: зеленый
// Цвет 3: синий

Пример: Изменение исходного массива

const numbers = [1, 2, 3];
const squares = [];

numbers.forEach(num => {
  squares.push(num * num);
});

console.log(squares); // [1, 4, 9]

Пример: Фильтрация данных

const temperatures = [25, 30, 15, 18, 32];
let hotDays = 0;

temperatures.forEach(temp => {
  if (temp > 25) {
    hotDays++;
  }
});

console.log(`Жарких дней: ${hotDays}`); // 2

Когда использовать forEach()?

  • Когда нужно выполнить операцию для каждого элемента массива.
  • Когда требуется доступ к индексу элемента.
  • Когда важна читаемость и функциональный стиль.

Ограничения

  • Нельзя прервать выполнение цикла с помощью break или continue.
  • Возвращаемое значение метода — undefined, поэтому его нельзя использовать для цепочки методов (в отличие от map() или filter()).

Сравнение подходов

Метод Для чего? Индекс? Работает с объектами? Прерывание цикла
for...of Массивы и итерируемые Нет Нет Да (break)
for...in Объекты Нет Да Да (break)
forEach() Массивы Да Нет Нет

Практические задачи

Задачи на for...of

  1. Сумма четных чисел:
    Создайте массив чисел и вычислите сумму четных элементов.

    const nums = [2, 5, 8, 11, 14];
let sum = 0;

for (const num of nums) {
  if (num % 2 === 0) {
    sum += num;
  }
}

console.log(sum); // 24
  2. Поиск максимального элемента:
    Найдите максимальное число в массиве без использования Math.max().

    const numbers = [4, 7, 2, 9, 1];
let max = numbers[0];

for (const num of numbers) {
  if (num > max) {
    max = num;
  }
}

console.log(max); // 9

Задачи на for...in

  1. Подсчет символов в строке:
    Создайте объект, где ключи — символы строки, а значения — их количество.

    const str = 'hello';
const charCount = {};

for (const char of str) {
  if (charCount.hasOwnProperty(char)) {
    charCount[char]++;
  } else {
    charCount[char] = 1;
  }
}

console.log(charCount); // {h: 1, e: 1, l: 2, o: 1}
  2. Объединение объектов:
    Напишите функцию, которая объединяет два объекта.

    function mergeObjects(obj1, obj2) {
  const result = {};

  for (const key in obj1) {
    result[key] = obj1[key];
  }

  for (const key in obj2) {
    result[key] = obj2[key];
  }

  return result;
}

Задачи на forEach()

  1. Преобразование массива:
    Увеличьте каждый элемент массива на 10%.

    const prices = [100, 200, 300];
const increasedPrices = [];

prices.forEach(price => {
  increasedPrices.push(price * 1.1);
});

console.log(increasedPrices); // [110, 220, 330]
  2. Фильтрация массива:
    Создайте новый массив, содержащий только строки длиннее 5 символов.

    const words = ['apple', 'cat', 'javascript', 'no'];
const longWords = [];

words.forEach(word => {
  if (word.length > 5) {
    longWords.push(word);
  }
});

console.log(longWords); // ['javascript']

Заключение

Мы разобрали три ключевых способа работы с массивами и объектами: for...of, for...in и forEach(). Каждый из них решает свои задачи:

  • for...of — идеален для массивов, когда нужна простота и читаемость.
  • for...in — ваш выбор при переборе свойств объектов.
  • forEach() — отлично подходит для функционального стиля и доступа к индексам.

Практикуйтесь, экспериментируйте с примерами и не бойтесь ошибаться! Если что-то не получается, то пересмотрите теорию или пишите вопросы в комментариях.

Полный курс по JavaScript для начинающих доступен здесь: https://max-gabov.ru/javascript-dlya-nachinaushih