JS で配列をループする 4 つの方法のまとめ

JS で配列をループする 4 つの方法のまとめ

この記事では、配列を走査する 4 つの方法を比較してまとめます。

for ループ:

for (let index=0; index < someArray.length; index++) {
 const elem = someArray[インデックス];
 // ···
}

for-in ループ:

for (constキーin someArray) {
 console.log(キー);
}

配列メソッド .forEach():

someArray.forEach((要素, インデックス) => {
 console.log(要素、インデックス);
});

for-of ループ:

for (const 要素のsomeArray) {
 console.log(要素);
}

通常は for-of が最善の選択です。理由を見てみましょう。

forループ [ES1]

JavaScript の for ループは非常に古く、ECMAScript 1 の頃から存在しています。 for ループは、arr の各要素のインデックスと値を記録します。

定数 arr = ['a', 'b', 'c'];
arr.prop = 'プロパティ値';

for (let index=0; index < arr.length; index++) {
 const elem = arr[インデックス];
 console.log(インデックス、要素);
}

// 出力:
// 0, 'a'
// 1, 'b'
// 2, 'c'

for ループの利点と欠点は何ですか?

  • これは非常に汎用性が高いですが、配列を反復処理したい場合には面倒になることもあります。
  • これは、他のループ メカニズムでは難しい、配列の最初の要素からループを開始したくない場合にも役立ちます。

for-in ループ [ES1]

for-in ループは for ループと同じくらい古く、ECMAScript 1 にも存在しています。次のコードでは、for-in ループを使用して arr のキーを出力します。

定数 arr = ['a', 'b', 'c'];
arr.prop = 'プロパティ値';

for (const キー in arr) {
 console.log(キー);
}

// 出力:
// '0'
// '1'
// '2'
// 'プロップ'

for-in は配列をループするのに良い方法ではありません。

  • 値ではなくプロパティ キーにアクセスします。
  • プロパティ キーとして、配列要素のインデックスは数値ではなく文字列です。
  • 配列要素のキーだけでなく、列挙可能なすべてのプロパティ キー (独自のキーと継承されたキー) にアクセスします。

継承されたプロパティに for-in でアクセスする実際の目的は、オブジェクトのすべての列挙可能なプロパティを反復処理することです。

配列メソッド .forEach() [ES5]

for も for-in も配列のループには特に適していないため、ECMAScript 5 ではヘルパー メソッド Array.prototype.forEach() が導入されました。

定数 arr = ['a', 'b', 'c'];
arr.prop = 'プロパティ値';

arr.forEach((要素, インデックス) => {
 console.log(要素、インデックス);
});

// 出力:
// 'a', 0
// 'b', 1
// 'c', 2

このアプローチは非常に便利です。多くの操作を実行しなくても、配列の要素とインデックスにアクセスできます。矢印関数 (ES6 で導入) を使用すると、構文がよりエレガントになります。

.forEach() の主な欠点は次のとおりです。

  • ループ本体では await を使用できません。
  • .forEach() ループを途中で終了することはできません。また、break は for ループ内でも使用できます。

.forEach() ソリューションを中止する

.forEach() のようなループを中止したい場合は、回避策があります。 .some() もすべての配列要素をループし、コールバックが true 値を返すと停止します。

const arr = ['赤', '緑', '青'];
arr.some((要素, インデックス) => {
 (インデックス >= 2)の場合{
 true を返す; // ループを終了する}
 console.log(要素);
 // このコールバックは暗黙的に `undefined` を返しますが、これは偽値です。 そしてサイクルは続きます。
});

// 出力:
// '赤'
// '緑'

これは .some() の乱用とも言え、for-of や break と比較すると、このコードを理解するのは簡単ではありません。

for-of ループ [ES6]

for-of ループは ECMAScript 6 でサポートされています。

定数 arr = ['a', 'b', 'c'];
arr.prop = 'プロパティ値';

(arrのconst要素) {
 console.log(要素);
}
// 出力:
// 'あ'
// 'b'
// 'c'

for-of は配列をループするのに非常に効果的です。

配列要素を反復処理するために使用されます。

awaitを使うことができます

  • 必要に応じて、for-await-of に移行するのは簡単です。

外部スコープでも break と continue を使用できます。

for-of と反復可能

for-of は配列を走査できるだけでなく、Map などの反復可能なオブジェクトを反復処理することもできます。

const myMap = 新しい Map()
 .set(false, 'いいえ')
 .set(true, 'はい')
;
for (const [キー, 値] of myMap) {
 console.log(キー、値);
}

// 出力:
// 偽、'いいえ'
// 真、'はい'

myMap を反復処理すると、[キー、値] のペアが生成され、それぞれを分解することで直接アクセスできます。

for-of と配列のインデックス

配列メソッド .entries() は、[インデックス、値] ペアの反復可能オブジェクトを返します。このメソッドで for-of と構造化分解を使用すると、配列のインデックスに簡単にアクセスできます。

const arr = ['チョコレート', 'バニラ', 'ストロベリー'];

for (const [index, elem] of arr.entries()) {
 console.log(インデックス、要素);
}
// 出力:
// 0, 'チョコレート'
// 1, 'バニラ'
// 2, 'イチゴ'

要約する

for-of ループの使いやすさは、for、for-in、.forEach() よりも優れています。

一般的に、4 つのループ メカニズム間のパフォーマンスの違いは重要ではありません。計算負荷の高い処理を実行する場合は、WebAssembly に切り替えることをお勧めします。

これで、JS で配列をループする 4 つの方法についての記事は終了です。JS で配列をループする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • js配列内のすべての要素をループする方法
  • JS 配列トラバーサルメソッド for ループと for...in
  • JavaScript で配列とマップをループするメソッドの概要
  • JS シンプル ループ トラバーサル JSON 配列メソッド
  • JSはforループを使用してテーブルのすべてのセルの内容を反復処理します。
  • JSON データをループする JS メソッド
  • javascript forEach 一般的なループトラバーサルメソッド
  • JSはforループを使用して子ノードを走査し、要素を見つけます。
  • JavaScript のループトラバーサルメソッド 12 個 [要約]
  • JavaScript ループトラバーサルの 24 種類のメソッドをすべてご存知ですか?

<<:  Dockerの高可用性構成の詳細な説明

>>:  MySQL シーケンス AUTO_INCREMENT の詳細な説明とサンプルコード

推薦する

HTML と CSS の命名規則の概要

CSS命名規則 ヘッダー: ヘッダーコンテンツ: コンテンツ/含むフッターナビゲーション: navサ...

JS はシンプルな todoList (メモ帳) 効果を実装します

メモ帳プログラムは、HTML + CSS + JavaScript の 3 つの主要なフロントエンド...

html+vue+element-ui のスムーズさを 1 分で体験

テクノロジーファンHTMLウェブページ、知っておくべきYouyou が開発した vue フロントエン...

mysql のファイル mysql-bin.000001 とは何ですか? 削除できますか?

ポートを使用して MySQL をインストールした後、しばらくすると /var の容量が不足しているこ...

Tomcat 初回展開 Web プロジェクト プロセス図

独自のWebプロジェクトをtomcatディレクトリの下のwebappsディレクトリに配置します。 R...

MySQL/MariaDB でピボット テーブルを実装する方法のサンプル コード

前回の記事では、Oracle でピボット テーブルを実装するいくつかの方法を紹介しました。今日は、同...

デザイン理論:フォントデザインの基礎

<br />言葉は、人間の思考や感情を伝えるために必然的に生み出されるものです。人類の文...

HTML チュートリアル: よく使われる HTML タグのコレクション (4)

関連記事:初心者が学ぶ HTML タグ (3)導入された HTML タグは、必ずしも XHTML 仕...

JavaScript タイピングゲーム

この記事では、タイピングゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...

Vueカスケードドロップダウンボックスの設計と実装

目次1. データベース設計2. フロントエンドページ3. 完全なデモフロントエンド開発では、カスケー...

CentOS8でのDockerの使い方の詳しい説明

1. CentOS8でのDockerのインストール カール https://download.doc...

Nginx ロケーション設定(ロケーションのマッチング順序)の詳細な説明

ロケーションは「位置指定」を意味し、主にさまざまな位置指定のための URI に基づいています。これは...

MySQL データベースを最適化する 8 つの方法の詳細な説明 (必読の定番)

導入:インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質に...

MySql Group Byは複数のフィールドのグループ化を実装します

日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...

モバイルデバイスでのフリーズ問題に対する CSS3 ソリューション (アニメーション パフォーマンスの最適化)

1. CSS、jQuery、Canvasを使用してアニメーションを作成する1. キャンバス利点: ...