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 の詳細な説明とサンプルコード

推薦する

nginx の 2 つのモジュールの proxy_pass の違い

1. 1.ngx_stream_proxy_moduleモジュールのproxy_passディレクティ...

WeChatアプレットが計算機機能を実装

この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...

ウェブサイトのデザインを改善するための役立つ提案を提供します

<br />ウェブサイトを科学的にデザインする: アイトラッキング研究から学ぶ 23 の...

Linuxのseqコマンドを使用して数字のシーケンスを生成します(推奨)

Linux の seq コマンドは、数字のリストを非常に高速に生成でき、使いやすく柔軟性に優れてい...

JavaScriptでフロアナビゲーションエフェクトを作成するプロセスの詳細な説明

目次この期間の目標1. 関数の実装1.1 構造層1.2 スタイルレイヤー1.3 行動層1.3.1 フ...

WeChatアプレットにナンバープレート入力機能を実装

目次序文背景大きな推測パターンを見つける構造とスタイルコンポーネントの実装パラメータキーボードの種類...

シンプルなビデオ連射機能を実装する JavaScript CSS3

この記事では、最も単純なビデオ連射機能をシミュレートするデモを作成します。アイデア:再生する動画と同...

vue3 統合 API における vue2 の $refs の代替方法についての簡単な説明

vue2 プロジェクト開発の経験があれば、$refs に精通しているでしょう。 vue3 の急激なア...

Linux入力サブシステムフレームワーク原理の分析

入力サブシステムフレームワークLinux 入力サブシステムは、上から下に向かって、入力サブシステム ...

Mysql テーブルで利用可能な最小 ID 値を照会する方法

今日、研究室のプロジェクトを見ていたとき、私にとって「難しい」問題に遭遇しました。実は、それは私があ...

Maxwell を使用して MySQL データをリアルタイムで同期する方法

目次マクスウェルについてMaxwellの設定と使用1. Maxwellインストールパッケージをダウン...

MySQL の where と on の違いと、いつ使用するか

以前、テーブル結合クエリを書いていたとき、whereとonの違いがわからず、SQLに小さな問題が発生...

JavaScript配列の一般的なメソッドの詳細な説明

目次元の配列を変更しない方法1. 連結文法:パラメータ:戻り値: 2. 参加する文法:パラメータ:戻...

Linux で top コマンドを使用する際のヒント

まず、top のいくつかのフィールドの意味を紹介します。 VIRT:仮想メモリ使用量1. プロセスが...

MySQLクラスタのDockerデプロイメントの実装

シングルノードデータベースの欠点大規模なインターネットプログラムはユーザーベースが大きいため、アーキ...