ループ処理を自由自在に操る！Array.@@iteratorでJavaScriptプログラミングをレベルアップ

Array.@@iterator は、JavaScript の Array オブジェクトに関連する特殊なメソッドです。このメソッドは、イテレータと呼ばれるオブジェクトを返します。イテレータは、ループ処理などで順序的に要素を処理するために使用されます。

詳細

Array.@@iterator メソッドは、次の 2 つのプロパティを持つオブジェクトを返します。

done: イテレーションが完了したかどうかを示すブール値です。
next(): 次の要素を返すメソッドです。

以下の例は、Array.@@iterator メソッドを使用して、Array の要素をループ処理する方法を示しています。

const numbers = [1, 2, 3, 4, 5];
const iterator = numbers[Symbol.iterator]();

let result = iterator.next();
while (!result.done) {
  console.log(result.value);
  result = iterator.next();
}

このコードは、次の出力を生成します。

注意点

Array.@@iterator メソッドは、直接呼び出す必要はありません。for...of ループなどの構文は、自動的にこのメソッドを呼び出してイテレータを取得します。

Array.@@iterator メソッドは、Array オブジェクトの要素をループ処理するために使用されるイテレータを取得するために使用されます。このメソッドは、ループ処理をより柔軟かつ効率的に行うために役立ちます。

Array.@@iterator メソッドは、ES6 で導入されました。
イテレータは、JavaScript の重要な概念であり、ループ処理以外にもさまざまな用途で使用できます。

例 1: for...of ループを使って要素を配列にコピーする

この例では、for...of ループを使って sourceArray の要素を targetArray にコピーします。

const sourceArray = [1, 2, 3, 4, 5];
const targetArray = [];

for (const element of sourceArray) {
  targetArray.push(element);
}

console.log(targetArray); // [1, 2, 3, 4, 5]

例 2: イテレータを使って要素を逆順にループする

この例では、イテレータを使って sourceArray の要素を逆順にループします。

const sourceArray = [1, 2, 3, 4, 5];
const iterator = sourceArray[Symbol.iterator]();

let result = iterator.next();
while (!result.done) {
  console.log(result.value);
  result = iterator.next();
}

// 逆順にループ: [5, 4, 3, 2, 1]

例 3: イテレータを使って要素を条件付きでループする

この例では、イテレータを使って sourceArray の要素をループし、偶数のみを出力します。

const sourceArray = [1, 2, 3, 4, 5];
const iterator = sourceArray[Symbol.iterator]();

let result = iterator.next();
while (!result.done) {
  if (result.value % 2 === 0) {
    console.log(result.value);
  }
  result = iterator.next();
}

// 偶数のみ: [2, 4]

例 4: イテレータを使ってオブジェクトに変換する

この例では、イテレータを使って sourceArray の要素をオブジェクトに変換します。

const sourceArray = [1, 2, 3, 4, 5];
const iterator = sourceArray[Symbol.iterator]();
const obj = {};

let result = iterator.next();
while (!result.done) {
  obj[result.value] = true;
  result = iterator.next();
}

console.log(obj); // {1: true, 2: true, 3: true, 4: true, 5: true}

例 5: イテレータを使って要素を新しい配列にマッピングする

この例では、イテレータを使って sourceArray の要素を 2 倍した新しい配列を作成します。

const sourceArray = [1, 2, 3, 4, 5];
const iterator = sourceArray[Symbol.iterator]();
const mappedArray = [];

let result = iterator.next();
while (!result.done) {
  mappedArray.push(result.value * 2);
  result = iterator.next();
}

console.log(mappedArray); // [2, 4, 6, 8, 10]

for ループ

最も基本的な代替方法は、従来の for ループを使用することです。

const numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

利点

ほとんどの状況で十分
シンプルで分かりやすい

欠点

末尾要素のインデックスを計算する必要がある
配列の長さを取得する必要がある
イテレータよりも冗長

forEach メソッド

forEach メソッドは、Array オブジェクトの各要素に対して関数を一度だけ実行します。

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

利点

コールバック関数内で要素を直接処理できる
for ループよりも簡潔

欠点

要素のインデックスにアクセスできない
ループを途中で抜けられない

Array.from メソッドとイテレータ

Array.from メソッドは、イテレータを受け取って、新しい Array オブジェクトを作成します。この方法を組み合わせることで、Array.@@iterator と同様の機能を実現できます。

const numbers = [1, 2, 3, 4, 5];
const iterator = numbers[Symbol.iterator]();
const newArray = Array.from(iterator);

console.log(newArray); // [1, 2, 3, 4, 5]

利点

新しい Array オブジェクトを作成できる
Array.@@iterator とほぼ同じ挙動

欠点

コードが少し冗長

ジェネレータ

ジェネレータは、関数の一種で、イテレーション可能なオブジェクトを生成できます。

function numberGenerator() {
  let i = 0;
  while (i < 5) {
    yield i++;
  }
}

const iterator = numberGenerator();

let result = iterator.next();
while (!result.done) {
  console.log(result.value);
  result = iterator.next();
}

利点

メモリ使用量が少ない
コードがよりエレガントで簡潔

欠点

古いブラウザではサポートされていない
理解するのが少し難しい

状況に応じて、最適な代替方法を選択することが重要です。

コードをよりエレガントにしたい場合は、ジェネレータがおすすめです。
Array.@@iterator と同様の機能が必要であれば、Array.from メソッドとイテレータを組み合わせる方法がおすすめです。
簡潔な方法が必要であれば、forEach メソッドがおすすめです。
シンプルで分かりやすい方法が必要であれば、for ループがおすすめです。

【JavaScript】配列作成をもっとスマートに！ `Array.of` メソッド徹底解説

Array. of メソッドは、ゼロ個以上の値をカンマ区切りで渡すことで、新しい配列を作成します。各値は、配列の要素として個別に格納されます。構文は以下の通りです。安全性型推論により、要素の型を明示的に記述する必要がありません。汎用性配列以外にも、TypedArray やカスタムオブジェクトの作成にも使用できます。

JavaScriptの「Date.getDate」メソッドを徹底解説！使い方からサンプルコードまで

JavaScript における "Date" オブジェクトは、特定の時点または日付を表すために使用されます。現在の日付と時刻、過去の日付と時刻、未来の日付と時刻など、さまざまな日付と時刻を表現できます。"Date" オブジェクトは、さまざまなメソッドを提供しており、日付と時刻に関する情報へのアクセスと操作を可能にします。これらのメソッドには、以下のものがあります。

JavaScript の Date オブジェクト: UTC ミリ秒数を取得する Date.getUTCMilliseconds()

Date. getUTCMilliseconds() メソッドは、JavaScript の Date オブジェクトにおいて、協定世界時 (UTC) に基づいたミリ秒数を取得するために使用されます。UTC は、世界共通の時間を指す標準的な時間帯であり、国際的な時刻管理に用いられています。

Moment.jsやLuxonも駆使！JavaScriptでDateオブジェクトの年を操作する方法のまとめ

Date. setFullYear メソッドは、JavaScriptにおける Date オブジェクトの年を指定した値に変更します。オプションで月と日も調整できます。このメソッドは、過去や未来の日付を操作したり、特定の年の日付を取得したりする際に役立ちます。

【超便利】JavaScriptで指定時刻にDateオブジェクトを作成する方法：Date.setHours活用術

このガイドでは、Date. setHours メソッドの使用方法、構文、オプション、そして実用的な例を分かりやすく解説します。Date. setHours メソッドは、以下の2つの役割を果たします。特定の日付の時間を設定する既存の Date オブジェクトに対して、時を変更することができます。例えば、午後3時に設定したり、真夜中0時に設定したりすることができます。

Moment.js不要！JavaScriptで協定世界時(UTC)の日付を簡単操作！「Date.setUTCFullYear」の使い方

引数dayValue (オプション): 設定する日の数値 (1から31までの範囲)。デフォルトは現在の月の日です。monthValue (オプション): 設定する月の数値 (0から11までの範囲)。デフォルトは現在の月です。yearValue: 設定する年の数値。

JavaScript で日付を設定: Date.setUTCMilliseconds() メソッドの詳細解説

Date. setUTCMilliseconds() メソッドは、JavaScript の Date オブジェクトにおいて、協定世界時 (UTC) を基準としたミリ秒数を設定するために使用されます。つまり、このメソッドを用いることで、特定の瞬間をミリ秒単位の精度で表現することが可能になります。

JavaScriptでDateオブジェクトのUTC秒を操作する: Date.setUTCSeconds徹底解説

Date. setUTCSeconds メソッドは、JavaScript の Date オブジェクトにおいて、秒単位で協定世界時 (UTC) を設定するためのものです。UTCは、世界共通の時間を指す基準であり、国際的な時刻管理に使用されています。

JavaScriptで日付を分かりやすく表示：Date.toLocaleStringの完全ガイド

上記コードは、現在の日付と時刻を新しい Date オブジェクトとして作成し、toLocaleString メソッドを使用してロケール設定に基づいた文字列に変換します。結果は、ユーザーのロケール設定に応じて、日付、曜日、時刻、およびタイムゾーン情報を含む、言語表現の文字列になります。

【今すぐ使える】JavaScript Date.toTimeString()：実務で役立つテクニック集

Date. toTimeString() メソッドは、JavaScript における Date オブジェクトの時刻部分を、英語表記の文字列として返します。これは、現在時刻や特定の時点における時刻情報を取り扱う際に役立ちます。構文戻り値日付オブジェクトの時刻部分を、HH:MM:SS GMT±xxxx (TZ) の形式で表した文字列 HH: 2桁の営業時間 (必要に応じて先頭に0を付加)MM: 2桁の分 (必要に応じて先頭に0を付加)SS: 2桁の秒 (必要に応じて先頭に0を付加)GMT±xxxx: グリニッジ標準時 (GMT) とのオフセット (正負、時差、およびオプションの分)(TZ): タイムゾーン略称 (省略可能)