JavaScript ステートメントの一般的な for ループの詳細な説明

JavaScript ステートメントの一般的な for ループの詳細な説明

JavaScript には、for、for in、for of、forEach ループなど、多くのループ ステートメントがあります。今日は、Array、Object、Set (ES6)、Map (ES6) の 4 つのデータ構造のループ ステートメントのサポートと違いを比較します。

4つの新しいテストデータタイプを作成する

arr = [1, 2, 3, 4, 5, 6]とします。
obj = { a: 1, b: 2, c: 3 } とします。
map = new Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]);
set = new Set(['a', 'b', 'c']);

1 対

通常の for ループは配列でも使用できます。 配列を走査する場合、配列の添字インデックスを走査し、添字を通じて値を取得します。

for (let i = 0; i < arr.length; i++) { // i は添え字(インデックス)
  コンソールログ(i)
  コンソールログ(arr[i])
}

2 で

for in は配列とオブジェクトの両方で使用できます。プロトタイプのプロパティもループアウトされることに注意してください。

配列

arr = [1, 2, 3, 4, 5, 6]とします。
配列.プロトタイプ.a = "1"

for (let i in arr) { // i は添え字(インデックス)
  コンソールログ(i)
  コンソールログ(arr[i])
}

プロトタイプもループアウトされていることがわかりますが、これは必要なことではありません。hasOwnProperty を使用してプロトタイプのプロパティをフィルター処理できます。

arr = [1, 2, 3, 4, 5, 6]とします。
配列.プロトタイプ.a = "1"

for (let i in arr) { // i は添え字(インデックス)
  もし(arr.hasOwnProperty(i)) {
    コンソールログ(i)
    コンソールログ(arr[i])
  }
}

物体

obj = { a: 1, b: '2', c: 3 } とします。
オブジェクト.プロトタイプ.d = 4

for (let key in obj) { // keyはキーです console.log(key)
  console.log(obj[キー])
}

Object にも同じ問題があります。プロトタイプ プロパティもループされ、プロトタイプのプロパティも hasOwnProperty を通じてフィルター処理されます。

for (let key in obj) { // key はキーです if (obj.hasOwnProperty(key)) {
    console.log(キー)
    console.log(obj[キー])
  }
}

3 の

for of は、Array、Object、Set、Map で使用できます。

配列

配列は本質的にオブジェクトなので、暗黙のプロトタイプ (__proto__) で定義されたメソッドを見つけることができます。

for (let key of arr.keys()) { // keyは添え字です console.log(key)
}
for (let value of arr) { // valueは値です console.log(value)
}
for (let value of arr.values()) { // valueは値です console.log(value)
}
for (let [key, value] of arr.entries()) { // キーは添え字、値は値、console.log(key,value)
}

物体

for (let [key, value] of Object.entries(obj)) { // キーは添え字、値は値、console.log(key, value)
}

セット

Setには重複がないので、キーと値は一貫しており、次の4つの出力は一貫していることを意味します。

for (let key of set.keys()) {  
  console.log(キー)
}
for (let 値のセット) {     
  console.log(値)
}
for (let 値 set.values()) { 
  console.log(値)
}
for (let [キー, 値] of set.entries()) { 
  console.log(キー、値)
}

地図

(map.keys() のキーを取得) { 
  console.log(キー)
}
for (マップの値) {     
  console.log(値)
}
for (map.values() の値を取得) { 
  console.log(値)
}
map.entries() の (let [キー, 値]) { 
  console.log(キー、値)
}

ループから抜け出すには break および continue ステートメントを使用し、関数本体から戻るには return を使用します。

for (let key of arr.keys()) { // キーは添え字です if (key == 3) {
    戻る
  }
  console.log(キー)
}
for (let key of arr.keys()) { // キーは添え字です if (key == 3) {
    壊す
  }
  console.log(キー)
}
for (let key of arr.keys()) { // キーは添え字です if (key == 3) {
    続く
  }
  console.log(キー)
}

4 それぞれ

forEach ループは、Array、Set、Map で使用できます。ただし、このメソッドでは、break または continue ステートメントを使用してループから抜け出すことも、return を使用して関数本体から戻ることもできません。

配列

arr.forEach((値、インデックス) => {
  console.log(値、インデックス)
})

セット

set.forEach((値、キー) => {
  console.log(値、キー)
})

地図

map.forEach((値、キー) => {
  console.log(値、キー)
})

中断、継続、戻る

プロンプトを表示するには続行を使用します

不正な継続ステートメント: 周囲の反復ステートメントがありません

breakを使用すると

不正なbreak文

returnを使用すると、戻らずにループが継続されます。

5 結論

通常の for ループは配列でも使用できます。配列を走査する場合、配列の添字インデックスを走査し、添字を通じて値を取得します。 for in は配列とオブジェクトの両方で使用できます。ただし、プロトタイプのプロパティもループアウトされることに注意してください。for と of は、Array、Object、Set、Map で使用できます。 break、continue、return も使用できます。forEach ループは、Array、Set、Map で使用できます。ただし、このメソッドでは、break または continue ステートメントを使用してループから抜け出すことも、return を使用して関数本体から戻ることもできません。

JavaScript 文でよく使われる for ループの詳しい説明はこれで終わりです。js for ループに関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript における 3 つの for ループ ステートメントの使用の概要 (for、for...in、for...of)
  • JavaScript ではおそらく switch 文を使う必要はない
  • JavaScript の条件文の最適化手法の概要
  • Pythonでjsステートメントを実行する方法
  • JavaScriptステートメントを理解するのに役立つ記事

<<:  Win2008 R2 mysql 5.5 zip 形式 mysql のインストールと設定

>>:  nginx プロキシでの複数の 302 応答の解決策 (nginx Follow 302)

推薦する

MySQLカスタム関数の簡単な使用例

この記事では、例を使用して MySQL カスタム関数の使用方法を説明します。ご参考までに、詳細は以下...

MySQL がエラーを報告: ファイルが見つかりません: './mysql/plugin.frm' 解決策

問題を見つける最近、仕事中に問題が見つかりました。問題は、MySQL ディスクがいっぱいだったことで...

MySQLで行を列に変換する方法

MySQL の行から列への操作いわゆる行から列への操作は、テーブルの行情報を列情報に変換することです...

CSS を使用して画像の下の空白を数ピクセル消去する方法の詳細な説明

最近、友人が私に質問をしました。ページをレイアウトすると、画像の下に 1 ~ 2 ピクセルの空白があ...

Vue ターンテーブル抽選の簡単な実装

この記事では、ホイール抽選を簡単に実装するためのVueの具体的なコードを参考までに共有します。具体的...

表示または可視性によってHTML要素を非表示にする

場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...

デザインスキルを向上させる良い方法

いわゆる才能(左脳と右脳)つまり、芸術的な才能があるかどうかは、人間の左脳と右脳の分業によって主に決...

H5ゲームをnginxサーバーにデプロイする方法の詳細な説明

自己学習型ゲーム開発の道において、最も充実した瞬間は、自分でミニゲームを作り、友達と共有して試しにプ...

Vue3 Reactivityの実装方法を教えます

目次序文始めるちょっとした考えコードの実装真似する実装トラックトリガーの実装観察の実装計算の実装序文...

Nginx 502 Bad Gateway エラーの原因と解決策

Nginx 502 Bad Gateway エラーに何度か遭遇しました。ここでメモしておこうと思いま...

HTML でスタイルを使用して属性を追加する例

必要なリンクにインライン スタイルを追加します。コードをコピーコードは次のとおりです。 <a ...

Reactでのイベントバインディングの実装は3つの方法を指しています

1. 矢印関数1. 矢印関数自体はこれをバインドしないという事実を利用します。 2. render(...

mysqlはタイムゾーン関連の問題を解決します

序文: MySQL を使用すると、時間の表示が正しくない、タイムゾーンが GMT+8 ゾーンにない、...

CSSスタイルシートを効率的に使用するためのヒント: スタイルシートの力を最大限に活用する

インターネット経済の継続的な発展に伴い、インターネット上の専門ウェブサイト、公共サービスウェブサイト...

CSS スタイルの優先順位とカスケード順序に関する議論

一般的に: [重要なフラグ1つ] > [特別なフラグ4つ] > 宣言順!importan...