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 5.6 のインストール手順(画像とテキスト付き)

MySQL はオープンソースの小規模リレーショナル データベース管理システムです。現在、MySQL...

JS は Baidu 検索ボックスを実装します

この記事の例では、Baidu検索ボックスを実装するためのJSの具体的なコードを参考までに共有していま...

デザイナーはコーディングを学ぶ必要がありますか?

多くの場合、 Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼ら...

SQL 文で OR と AND を混在させる場合のヒント

現在、このような要件があります。ログインした人がカスタマー サービス担当者である場合、注文は「このカ...

CSSでよく使われるフォントスタイルを設定することで様々なフォントの変更が可能(例詳細説明)

CSS フォント プロパティは、テキストのフォント ファミリ、サイズ、太字、スタイル (斜体など)...

Vueのメソッドとプロパティの詳細な説明

Vueのメソッドとプロパティ1. 方法使用法 1メソッド: {メソッド名: function(){}...

PCとモバイルの適応の問題に対する迅速な解決策

Web ページを作成する場合、通常、コンピューターの画面サイズと携帯電話の画面サイズの違いなどの問題...

Javascriptの基礎を学ぶための10の重要な質問

目次1. Javascript とは何ですか? 2. DOMとは何か3. JSコードの実行方法4. ...

nginx のバージョン番号と WEB サーバー情報を隠すための解決策

Nginxはバージョン情報を隠すだけでなく、カスタムWebサーバー情報もサポートします。まずは最終的...

Linux システム ディスクのフォーマットとスワップ パーティションの手動追加

Windows: NTFS、FATをサポートLinux は次のファイル形式をサポートしています: C...

WIN10 システムと Docker 内部コンテナ IP 間の通信方法

1. Windows 版の Docker をインストールしたら、Docker クイックスタート ター...

MySQLトリガーの使用

目次1. トリガーの紹介1. トリガーとは何ですか? 2. トリガーの特徴2. トリガーを作成する1...

Centos8環境でSSHポート番号を変更する方法

目次序文始める序文サーバーのデフォルトの SSH ポート番号は通常 22 であるため、ほとんどのユー...

MySQL8 ベースの docker-compose デプロイメント プロジェクトの実装

1. まず、次のパスに従って対応するフォルダを作成します。 ローカルのdockerでmysqlを実行...

Vueはシンプルな計算機能を実装します

この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な...