Array.@@iterator をマスターして、JavaScriptスキルを向上させよう
JavaScript 配列の Array.@@iterator について
イテレータとは?
イテレータは、値のシーケンスを順に取得するためのオブジェクトです。イテレータオブジェクトには、次の2つの重要なメソッドがあります。
- next(): 次の値を取得します。
- done: イテレーションが完了したかどうかを示します。
Array.@@iterator を使用するには、以下の2つの方法があります。
シンボルを使用する
const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
// イテレータオブジェクトから値を取得
let next = iterator.next();
while (!next.done) {
console.log(next.value); // 1, 2, 3
next = iterator.next();
}
for-of ループを使用する
const arr = [1, 2, 3];
for (const value of arr) {
console.log(value); // 1, 2, 3
}
上記の例では、どちらも同じ結果を出力します。for-of ループは、Array.@@iterator を内部的に使用して、配列の要素を順番に取得しています。
Array.@@iterator を使用すると、以下のような利点があります。
- 簡潔なコード: forループやforEachループなどの反復処理をより簡潔に記述できます。
- 効率的な処理: イテレータオブジェクトは、配列の要素を直接アクセスするため、ループ処理の効率が向上します。
- 汎用性: イテレータオブジェクトは、さまざまな反復処理で使用できます。
Array.@@iterator は、JavaScript の Array オブジェクトに備わる便利なプロパティです。イテレータオブジェクトを使用することで、配列の要素を順番に取得するためのコードをより簡潔かつ効率的に記述できます。
補足
- Array.@@iterator は、非標準の名前です。標準の名前は、Array.prototype[Symbol.iterator] です。
- イテレータオブジェクトは、ES6で導入されました。
Array.@@iterator のサンプルコード
配列の要素を順番に取得する
const arr = [1, 2, 3, 4, 5];
// シンボルを使用する
const iterator = arr[Symbol.iterator]();
let next = iterator.next();
while (!next.done) {
console.log(next.value); // 1, 2, 3, 4, 5
next = iterator.next();
}
// for-of ループを使用する
for (const value of arr) {
console.log(value); // 1, 2, 3, 4, 5
}
偶数のみ取得する
const arr = [1, 2, 3, 4, 5];
// イテレータオブジェクトを使用して、偶数のみ取得
const iterator = arr[Symbol.iterator]();
let next = iterator.next();
while (!next.done) {
if (next.value % 2 === 0) {
console.log(next.value); // 2, 4
}
next = iterator.next();
}
配列の要素を逆順に取得する
const arr = [1, 2, 3, 4, 5];
// イテレータオブジェクトを使用して、配列の要素を逆順に取得
const iterator = arr[Symbol.iterator]({
reverse: true,
});
let next = iterator.next();
while (!next.done) {
console.log(next.value); // 5, 4, 3, 2, 1
next = iterator.next();
}
イテレータオブジェクトを自作する
class MyIterator {
constructor(arr) {
this.arr = arr;
this.index = 0;
}
next() {
return {
value: this.arr[this.index++],
done: this.index === this.arr.length,
};
}
}
const arr = [1, 2, 3, 4, 5];
const iterator = new MyIterator(arr);
let next = iterator.next();
while (!next.done) {
console.log(next.value); // 1, 2, 3, 4, 5
next = iterator.next();
}
- 配列の要素をフィルタリングしたり、マッピングしたりするには、Array.prototype.filter() や Array.prototype.map() などのメソッドを使用できます。
- イテレータオブジェクトは、Promise や async/await とも使用できます。
Array.@@iterator 以外の方法
for ループ
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); // 1, 2, 3, 4, 5
}
forEach ループ
const arr = [1, 2, 3, 4, 5];
arr.forEach((value) => {
console.log(value); // 1, 2, 3, 4, 5
});
while ループ
const arr = [1, 2, 3, 4, 5];
let i = 0;
while (i < arr.length) {
console.log(arr[i]); // 1, 2, 3, 4, 5
i++;
}
do-while ループ
const arr = [1, 2, 3, 4, 5];
let i = 0;
do {
console.log(arr[i]); // 1, 2, 3, 4, 5
i++;
} while (i < arr.length);
これらの方法は、Array.@@iterator よりもシンプルで分かりやすいですが、コードが冗長になる場合もあります。
その他
- Promise や async/await とも使用できます。
Array.@@iterator は、JavaScript の配列を反復処理するための便利な方法です。しかし、他の方法も状況に応じて使い分けることが重要です。
JavaScript Array の fill メソッド: ループはもう古い!fill メソッドでスマートに書き換えよう
構文引数value: 配列の要素を書き換える値start: 書き換えを開始するインデックス (省略可能、デフォルトは 0)end: 書き換えを終了するインデックス (省略可能、デフォルトは array. length)戻り値書き換えられた配列
JavaScriptの秘宝「Array.@@species」:配列操作の可能性を広げる魔法の扉
この解説では、Array. @@speciesの仕組みを分かりやすく説明し、以下の内容を学びます。Array. @@speciesって何?Array. @@speciesを使うメリットArray. @@speciesの具体的な使い方Array
配列風オブジェクトから簡単に配列を作成! JavaScript Array.from の使い方
従来の配列リテラルやArrayコンストラクタと比較して、Array. fromは以下のような利点があります。配列風オブジェクトから簡単に配列を作成できる例えば、NodeListやStringなど、配列ではないオブジェクトでも、Array. fromを使えば簡単に配列に変換できます。
JavaScript Arrayの階層構造を自在に操る: array.flat メソッド
array. flat メソッドは、以下の機能を提供します。配列の要素を再帰的に展開し、1つの配列に結合するオプションで、展開する深さを指定できるES2019で導入された従来の方法と比較すると、以下の利点があります。コードが簡潔になる処理速度が速い場合がある
JavaScript初心者必見!Date.setUTCMillisecondsメソッドを徹底解説
メソッドの役割Date. setUTCMillisecondsメソッドは、以下の2つの役割を担います。既存の日付時刻のミリ秒部分を変更する: すでに作成済みのDateオブジェクトに対して、ミリ秒単位で時刻を調整できます。新しい日付時刻を作成する: 引数にミリ秒値のみを渡すことで、ミリ秒単位の精度で新しいDateオブジェクトを作成できます。
EvalError.evalErrorの回避と安全なコード記述: JavaScriptエラー処理のベストプラクティス
EvalError. evalError が発生する主な理由は以下の通りです。eval() 関数が非推奨または無効化されている環境: 多くの現代的なブラウザでは、セキュリティ上の懸念から eval() 関数が無効化されています。このような環境で eval() 関数を実行しようとすると、EvalError
JavaScript で「Errors: in operator no object」エラーを回避するためのベストプラクティス
このエラーは、JavaScriptでオブジェクトに属していないプロパティにアクセスしようとすると発生します。オブジェクトのプロパティにアクセスするには、ドット(.`)演算子を使用します。しかし、オブジェクトが存在しない、またはアクセスしようとしているプロパティが存在しない場合、このエラーが発生します。
JavaScript: 空の配列でreduce() 関数がエラーを起こす原因と解決策
JavaScript の reduce() 関数を使って空の配列を処理しようとすると、Errors: Reduce of empty array with no initial value というエラーが発生します。これは、reduce() 関数が空の配列を処理できないためです。
JavaScript RegExp オブジェクトの source プロパティ
source プロパティ は、RegExp オブジェクトのプロパティの一つで、正規表現のパターン文字列を取得するために使用されます。例:この例では、regExp という RegExp オブジェクトを作成し、source プロパティを使用して、そのオブジェクトのパターン文字列 "ab+c" を取得しています。
Number.MIN_SAFE_INTEGER を理解して JavaScript の精度制限を克服する
Number. MIN_SAFE_INTEGER を理解するには、以下の点を押さえることが重要です。安全な整数とは?JavaScript は、64ビット浮動小数点数形式で数値を表現します。しかし、この形式には整数表現の精度制限があり、52ビットしか使用できません。そのため、2^53 - 1 より大きい整数または -(2^53 - 1) より小さい整数は、正確に表現できない可能性があります。