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