Как получить индекс элемента в цикле for...of в TypeScript?

Использование метода entries() вместе с деструктуризацией

В TypeScript (как и в современном JavaScript) лучший способ получить индекс в цикле for...of — это использовать метод массива .entries(). Он возвращает итератор, который при каждой итерации даёт пару [индекс, значение]. С помощью деструктуризации вы можете красиво разделить эти значения.

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

for (const [index, fruit] of fruits.entries()) {
    console.log(`${index}: ${fruit}`);
}
// Вывод:
// 0: apple
// 1: banana
// 2: orange

Как это работает

• Метод .entries() — возвращает новый итератор, который содержит пары ключ/значение для каждого индекса в массиве. Для массивов "ключ" — это числовой индекс.
• Деструктуризация массива — const [index, fruit] позволяет сразу извлечь первое значение (индекс) в переменную index, а второе (значение) — в fruit.
• TypeScript и типы — TypeScript автоматически выводит типы: index будет иметь тип number, а fruit — string (так как массив объявлен как string[]). Никаких дополнительных аннотаций не требуется.

Почему это лучше альтернатив

• Читаемость — код компактный и понятный.
• Типобезопасность — TypeScript гарантирует, что вы не перепутаете индекс и значение.
• Производительность — метод .entries() не создаёт новый массив, он возвращает итератор, который работает "лениво". Это эффективно для больших массивов.
• Стандарт — это подход, рекомендованный в официальной документации TypeScript и JavaScript.

Дополнительные примеры

Вы можете использовать этот паттерн с любыми итерируемыми объектами, не только с массивами:

// С Map
const map = new Map<string, number>([['a', 1], ['b', 2]]);
for (const [key, value] of map.entries()) {
    console.log(key, value);
}

// С Set (здесь индекс — это сам элемент, но entries() вернёт [value, value])
const set = new Set<number>([10, 20, 30]);
for (const [index, value] of set.entries()) {
    console.log(index, value); // index === value для Set
}

Если вам нужен только индекс (без значения)

Можно использовать .keys():

for (const index of fruits.keys()) {
    console.log(index); // 0, 1, 2
}

Но на практике чаще всего нужны оба значения, поэтому .entries() — универсальное решение.

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

fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});