Learn JavaScript

keys() - метод для перебора индексов массива в JavaScript

keys() возвращает итератор, который по очереди отдаёт индексы массива.

Этот метод удобен, когда нужно пройтись именно по индексам, а не по значениям.

Синтаксис

array.keys()

Метод не принимает аргументов.

Что делает keys()

keys() создаёт объект-итератор, который возвращает индексы массива по порядку.

const iterator = ["a", "b", "c"].keys();

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Что возвращает keys()

Метод возвращает не массив, а итератор.

const result = ["apple", "banana"].keys();

console.log(result);
// Array Iterator {}

Поэтому с ним обычно работают через for...of, Array.from() или spread.

Перебор через for…of

Самый понятный вариант использования - пройтись по индексам массива в цикле.

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

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

Результат:

0
1
2

Преобразование в обычный массив

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

const result = Array.from(["a", "b", "c"].keys());

console.log(result); // [0, 1, 2]

То же самое можно сделать через spread:

const result = [...["x", "y"].keys()];

console.log(result); // [0, 1]

keys() не меняет исходный массив

Метод только создаёт итератор и не изменяет сам массив.

const numbers = [10, 20, 30];
const iterator = numbers.keys();

console.log(numbers); // [10, 20, 30]

Пустые слоты

keys() проходит по индексам даже у пустых слотов массива.

const arr = Array(3);

console.log([...arr.keys()]); // [0, 1, 2]

Это логично: методу важны именно индексы, а не наличие значения в ячейке.

keys(), values() и entries()

У этих методов похожая идея, но они возвращают разное:

  • keys() - индексы
  • values() - значения
  • entries() - пары [индекс, значение]

Пример:

const numbers = [10, 20];

console.log([...numbers.keys()]);    // [0, 1]
console.log([...numbers.values()]);  // [10, 20]
console.log([...numbers.entries()]); // [[0, 10], [1, 20]]

Итератор расходуется

Итератор нельзя использовать бесконечно. После полного прохода он становится пустым.

const iterator = ["a", "b"].keys();

console.log([...iterator]); // [0, 1]
console.log([...iterator]); // []

Если нужен новый проход, нужно снова вызвать keys().

Когда это полезно

keys() удобно использовать, когда:

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

Частые ошибки

Думать, что keys() возвращает массив

const result = [1, 2, 3].keys();

console.log(result); // Array Iterator {}

Если нужен обычный массив, итератор надо развернуть.

Забывать, что итератор одноразовый

const iterator = ["a", "b"].keys();

console.log([...iterator]); // [0, 1]
console.log([...iterator]); // []

После полного прохода этот же итератор больше не содержит значений.

Ждать, что keys() вернёт значения массива

const numbers = [10, 20, 30];

console.log([...numbers.keys()]); // [0, 1, 2]

Этот метод возвращает именно индексы.

Быстрая памятка

  • keys() возвращает итератор индексов массива
  • метод не меняет исходный массив
  • результатом будет не массив, а итератор
  • пустые слоты тоже учитываются
  • чаще всего keys() используют с for...of, Array.from() или spread

Коротко

keys() - это удобный способ получить индексы массива в виде итератора. Главное, что стоит запомнить: метод возвращает не массив, а последовательность индексов, с которой обычно работают через for...of или разворачивают в обычный массив.