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 をよろしくお願いいたします。

以下もご興味があるかもしれません: