values() возвращает итератор, который по очереди отдаёт значения массива.
Этот метод удобен, когда нужен именно перебор значений без индексов.
Синтаксис
array.values()Метод не принимает аргументов.
Что делает values()
values() создаёт объект-итератор, который возвращает элементы массива по порядку.
const iterator = ["a", "b", "c"].values();
console.log(iterator.next()); // { value: "a", done: false }
console.log(iterator.next()); // { value: "b", done: false }
console.log(iterator.next()); // { value: "c", done: false }
console.log(iterator.next()); // { value: undefined, done: true }Что возвращает values()
Метод возвращает не массив, а итератор.
const result = ["apple", "banana"].values();
console.log(result);
// Array Iterator {}Поэтому с ним обычно работают через for...of, Array.from() или spread.
Перебор через for…of
Один из самых удобных способов использовать values() - пройтись по значениям в цикле.
const fruits = ["apple", "banana", "orange"];
for (const fruit of fruits.values()) {
console.log(fruit);
}Результат:
"apple"
"banana"
"orange"Преобразование в обычный массив
Если нужен обычный массив, итератор можно развернуть:
const result = Array.from(["a", "b", "c"].values());
console.log(result); // ["a", "b", "c"]То же самое можно сделать через spread:
const result = [...["x", "y"].values()];
console.log(result); // ["x", "y"]values() не меняет исходный массив
Метод только создаёт итератор и не изменяет массив.
const numbers = [10, 20, 30];
const iterator = numbers.values();
console.log(numbers); // [10, 20, 30]Пустые слоты
values() проходит и по пустым слотам массива.
const arr = Array(3);
console.log([...arr.values()]); // [undefined, undefined, undefined]Это важно, потому что forEach() в такой ситуации callback вообще не вызовет.
values(), keys() и entries()
У этих методов похожая идея, но результаты у них разные:
values()- значенияkeys()- индексыentries()- пары[индекс, значение]
Пример:
const numbers = [10, 20];
console.log([...numbers.values()]); // [10, 20]
console.log([...numbers.keys()]); // [0, 1]
console.log([...numbers.entries()]); // [[0, 10], [1, 20]]values() и for…of
Для массива for...of и так проходит по значениям.
const numbers = [1, 2, 3];
for (const value of numbers) {
console.log(value);
}Поэтому values() чаще используют, когда нужно явно показать намерение или получить именно итератор.
Итератор расходуется
Итератор нельзя использовать бесконечно. После полного прохода он становится пустым.
const iterator = ["a", "b"].values();
console.log([...iterator]); // ["a", "b"]
console.log([...iterator]); // []Если нужен новый проход, нужно снова вызвать values().
Когда это полезно
values() удобно использовать, когда:
- нужны только значения массива
- хочется работать именно с итератором
- нужно явно показать, что интересуют значения, а не индексы
Частые ошибки
Думать, что values() возвращает массив
const result = [1, 2, 3].values();
console.log(result); // Array Iterator {}Если нужен обычный массив, итератор надо развернуть.
Забывать, что итератор одноразовый
const iterator = ["a", "b"].values();
console.log([...iterator]); // ["a", "b"]
console.log([...iterator]); // []После полного прохода этот же итератор уже пуст.
Думать, что values() делает что-то другое, чем for…of
const numbers = [1, 2, 3];
for (const value of numbers.values()) {
console.log(value);
}Для массива это тот же перебор значений, просто в более явной форме.
Быстрая памятка
values()возвращает итератор значений массива- метод не меняет исходный массив
- результатом будет не массив, а итератор
- пустые слоты тоже участвуют в переборе как
undefined - чаще всего
values()используют сfor...of,Array.from()или spread
Коротко
values() - это способ получить значения массива в виде итератора. Главное, что стоит запомнить: метод возвращает не массив, а последовательность значений, с которой удобно работать через for...of или развернуть её в обычный массив.