Доступ к индексу элемента в ES6 for-of цикле: решение

Быстрый ответ

Для того чтобы лаконично и наглядно применять индексацию в цикле, используйте в связке array.entries() и for-of:

for (const [index, value] of ['a', 'b', 'c'].entries()) {
  console.log(index, value); // будет выведено: 0 'a', 1 'b', 2 'c'
}

Этот подход одновременно даёт доступ к индексу и к значению элемента.

Когда вы хотите оперировать индексами

Использование array.keys() для обращения к индексам

Если вам нужно работать исключительно с индексами, воспользуйтесь array.keys():

for (const index of ['a', 'b', 'c'].keys()) {
  console.log(index); // вывод: 0, 1, 2 – чёткая работа с индексами
}

Подробнее об этом расскажет наш спикер на видео

Отслеживание индекса при использовании цикла for-of

Также возможно самостоятельно подсчитывать индекс, прибегая к классическому подходу:

let index = 0;
for (const value of ['a', 'b', 'c']) {
  console.log(index++, value); // вывод: 0 'a', 1 'b', 2 'c' – синхронизированная индексация
}

Максимальный контроль при помощи обыкновенного цикла for

Если же вам требуется полный контроль над процессом итерации, выбор в пользу классического цикла for будет оптимальным:

let arr = ['a', 'b', 'c'];
for (let i = arr.length – 1; i >= 0; i--) {
  console.log(i, arr[i]); // итерация с конца к началу: 2 'c', 1 'b', 0 'a'
}

Визуализация

Визуализируем работу индексации в цикле for-of, проводя аналогию с поиском сокровищ по карте (🗺️):

const treasures = ['🔔', '💎', '👑']; // Наши драгоценности
let indices = [...treasures.keys()]; // Ключ к нахождению сокровищ

Составим таблицу соответствия между сокровищами и их местоположениями:

| Сокровище (Значение) | Местоположение (Индекс) |
| -------------------- | ----------------------- |
| 🔔                   | 0                       |
| 💎                   | 1                       |
| 👑                   | 2                       |

Фиксируем результат:

for (const [index, treasure] of treasures.entries()) {
  console.log(`Сокровище найдено на позиции ${index}: ${treasure}`);
}

С помощью entries() мы успешно находим сокровища, зная их местоположения по индексам. 🗺️💡

Итераторы и метод .next()

Итераторы — это внутренняя механика циклов for-of:

const entriesIterator = ['a', 'b', 'c'].entries();
let result = entriesIterator.next();
while (!result.done) {
  console.log(result.value); // масивы типа: [0, 'a'], [1, 'b'], [2, 'c']
  result = entriesIterator.next();
}

Будьте осторожны с forEach и for-in

forEach и for-in могут вести себя непредсказуемо при итерации по массивам:

['a', 'b', 'c'].forEach((value, index) => {
  // Проходим по всему массиву.
});

for (const prop in ['a', 'b', 'c']) {
  if (['a', 'b', 'c'].hasOwnProperty(prop)) {
    // prop может быть чем угодно, включая свойства объекта или методы.
  }
}

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

Полезные материалы

1. for...of – JavaScript | MDN — Официальная документация MDN по циклам for...of.
2. ECMAScript 6: Новые возможности: Обзор и сравнение — Обзор нововведений ES6.
3. ES6 Детально: Итераторы и цикл for-of – Mozilla Hacks — Углублённый анализ работы итераторов и циклов for-of.
4. Array.prototype.entries() – JavaScript | MDN — Руководство по использованию Array.prototype.entries() для индексированных итераций.
5. Can I use ES6 features now? Compatibility table — Таблица совместимости браузеров с функциональностью ES6.
6. TypeScript: Документация – Итераторы и генераторы — Описание поддержки итераторов и циклов for-of в TypeScript.