Будешь ли итерировать массив через цикл for…of

Итерация массива через for...of

Определение

for...of — это цикл в JavaScript для итерации по элементам итерируемых объектов (массивы, строки, Set, Map и т.д.). Это удобная альтернатива классическому for и методу .forEach().

Синтаксис

for (const element of array) {
  console.log(element);
}

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

ДА, использу for...of когда:

1. Просто нужны элементы массива

const fruits = ['apple', 'banana', 'orange'];

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

// Вывод: apple, banana, orange

2. Нужно прервать цикл (break) или пропустить (continue)

const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  if (num === 3) break;
  console.log(num);
}
// Вывод: 1, 2

3. Итерация по строкам

const word = 'hello';

for (const char of word) {
  console.log(char);
}
// Вывод: h, e, l, l, o

4. Итерация по Set и Map

const set = new Set([1, 2, 3]);
for (const item of set) {
  console.log(item);
}

const map = new Map([['a', 1], ['b', 2]]);
for (const [key, value] of map) {
  console.log(key, value);
}

Когда НЕ использовать for...of

НЕТ, не использу for...of когда:

1. Нужен индекс элемента

const fruits = ['apple', 'banana', 'orange'];

// Нет индекса
for (const fruit of fruits) {
  console.log(fruit);
}

// Лучше использовать классический for
for (let i = 0; i < fruits.length; i++) {
  console.log(i, fruits[i]);
}

// Или forEach
fruits.forEach((fruit, index) => {
  console.log(index, fruit);
});

2. Нужна трансформация элементов

const numbers = [1, 2, 3, 4, 5];

// Неудобно через for...of
const doubled = [];
for (const num of numbers) {
  doubled.push(num * 2);
}

// Лучше использовать .map()
const doubled = numbers.map(num => num * 2);

3. Нужно фильтровать элементы

const numbers = [1, 2, 3, 4, 5];

// Неудобно
const evens = [];
for (const num of numbers) {
  if (num % 2 === 0) {
    evens.push(num);
  }
}

// Лучше использовать .filter()
const evens = numbers.filter(num => num % 2 === 0);

4. Нужно редуцировать массив

const numbers = [1, 2, 3, 4, 5];

// Неудобно
let sum = 0;
for (const num of numbers) {
  sum += num;
}

// Лучше использовать .reduce()
const sum = numbers.reduce((acc, num) => acc + num, 0);

Сравнение методов итерации

for...of

for (const element of array) {
  console.log(element);
  if (element === 2) break;
}

Плюсы: чистый, с break/continue Минусы: нет индекса

forEach

array.forEach((element, index) => {
  console.log(element, index);
});

Плюсы: есть индекс Минусы: нет break/continue

map

const result = array.map(element => element * 2);

Плюсы: функциональный подход Минусы: для трансформации

Классический for

for (let i = 0; i < array.length; i++) {
  console.log(i, array[i]);
}

Плюсы: есть индекс, полный контроль Минусы: многословный

Таблица выбора

Производительность

Обычно разницы нет, но если критична производительность - классический for быстрее.

Резюме

Использую for...of когда:

• Просто нужно итерировать элементы
• Нужны break/continue
• Работаю со строками, Set, Map

НЕ использую for...of когда:

• Нужен индекс
• Нужна трансформация (.map)
• Нужна фильтрация (.filter)
• Нужна редукция (.reduce)

Вывод: for...of — это отличный выбор для простой итерации массива с возможностью прерывания цикла.