JavaScriptのvaluesの使い方！配列のイテレータを取得

JavaScriptで配列の値をイテレータを使って、処理することができるvaluesメソッドについて書いています。
valuesメソッドを使うと、配列の要素の値を順番に返すIteratorオブジェクトを取得できます。

実際に動くサンプルを使って、以下の操作を解説します。

valuesメソッドの基本的な使い方

valuesメソッドは、配列の各要素の値を順番に返すIteratorオブジェクトを返します。
基本的な構文は以下のとおりです。

array.values()

配列の値を取得する

イテレータを使って、配列の値を順番に取得します。

const fruits = ['apple', 'banana', 'orange'];
const values = fruits.values();

console.log(values.next().value); // 結果：apple
console.log(values.next().value); // 結果：banana
console.log(values.next().value); // 結果：orange
console.log(values.next().done);  // 結果：true (すべての要素を処理済み)

fruits配列を作って、次の行でvaluesメソッドを呼んで、Iteratorオブジェクトを取得しています。

そして、values.next()を呼ぶことで、配列の先頭から順番に値を取得できます。
next().valueとすると、配列の値にアクセスできて、要素が返ってきます。

next().doneプロパティがtrueになると、すべての要素が処理済みであることを示します。
処理が終わるまではfalseになっています。

for…ofループでの使用例

valuesメソッドは、for...ofループと組み合わせて使用することもできます。

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

for (const value of fruits.values()) {
  console.log(value);
}
// 結果：
// apple
// banana
// orange

for...ofループでは、valuesメソッドが返すIteratorオブジェクトから、各要素の値を直接取り出すことができます。
ですが、基本的には、valuesメソッドを呼ばずにそのまま処理する方がシンプルです。

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

for (const value of fruits) {
  console.log(value);
}
// 結果：
// apple
// banana
// orange

valuesメソッドの使い所

valuesメソッドは、Iteratorオブジェクトを直接操作したい場合や、Iteratorオブジェクトを他の処理に渡したい場合に便利です。

Iteratorオブジェクトのnextメソッドを明示的に呼び出すサンプルコード

nextメソッドを明示的に呼び出して、ループ処理をしています。

const fruits = ['apple', 'banana', 'orange'];
const iterator = fruits.values();

let result = iterator.next();
while (!result.done) {
  console.log(result.value);
  result = iterator.next();
}
// 結果：
// apple
// banana
// orange

Iteratorオブジェクトをジェネレータ関数に渡すサンプルコード

配列からIteratorオブジェクトを作成して、ジェネレータに渡して、ループ毎に大文字に変換する処理をしています。

function* processIterator(iterator) {
  for (const value of iterator) {
    console.log(`Processing value: ${value}`);
    yield value.toUpperCase();
  }
}

const fruits = ['apple', 'banana', 'orange'];
const iterator = fruits.values();

const generator = processIterator(iterator);

for (const processedValue of generator) {
  console.log(`Received processed value: ${processedValue}`);
}
// 結果：
// Processing value: apple
// Received processed value: APPLE
// Processing value: banana
// Received processed value: BANANA
// Processing value: orange
// Received processed value: ORANGE

JavaScriptのvaluesメソッドの使い方まとめ

今回はJavaScriptのvaluesメソッドの使い方について確認しました。
記事の内容をまとめます。