JS における for、for...in、for...of、forEach の違いと使用例

forループ

基本的な構文形式:

for(変数の初期化; 条件式; 演算式){

ループ本体ステートメント。
}

通常の for ループは、配列とオブジェクトの両方で使用できます。 for ループでは、 return や break などを使用してループを中断できます。

//配列を走査する var arr = [1,2,3,4,5];
        for(var i=0;i<arr.length;i++){
            コンソールにログ出力します。
        }

//オブジェクトをトラバースする var obj={
            x0:10,
            x1:20,
            2:30 より
        }
        (var k=0;k<3;k++){
            コンソールにログ出力します。
        }

オブジェクトをトラバースする場合、属性の名前付けと k の値には明らかに大きな制限があります。

forEachループ

基本的な構文形式:

arr.forEach(関数(k){
コンソールログ(k);
})

配列から要素を1つずつ取り出してkに格納し、kを関数のパラメータとして渡します。

.forEach() は、配列の要素を反復処理できる Array プロトタイプのメソッドです。.forEach() はオブジェクトを反復処理できません。 forEach メソッドでは、break ステートメントを使用してループから抜け出すことも、return を使用して関数本体から戻ることもできません。

//配列を走査する var arr = [3,2,3,9,5];
         arr.forEach(関数(値,arr){
            console.log(値);
         })

for…in ループ

基本的な構文形式:

for(配列名またはコレクション名のvar変数)
{
配列名 [変数]
}

変数に格納されている配列またはコレクションのインデックス。

 //配列を走査する var arr = [1,2,3,4,5];
        for(変数 i in arr){
            コンソールにログ出力します。
        }

//オブジェクトをトラバースする var obj={
            x0:10,
            x1:20,
            2:30 より
        }
        for(var k in obj){
            コンソールにログ出力します。
        }

1. 添え字の値は文字列型である可能性がある

2. ループは配列要素を走査するだけでなく、追加されたその他のカスタム属性も走査します。たとえば、obj にカスタム属性 obj.name が含まれている場合、この名前属性もこのループに表示されます。

3. 場合によっては、上記のコードは配列をランダムな順序でループします。

for-in ループが最初に設計されたとき、キーとして文字列値を持つオブジェクトに使用されていました。配列ではなく。

for…of ループ

基本的な構文形式:

for(配列名またはコレクション名のvar変数)
{
console.log(変数);
}

変数は配列またはコレクション内の要素を格納します。

 //配列を走査する var arr = [3,2,3,9,5];
         for(var arrの値){
            console.log(値);
         }

//オブジェクトをトラバースする var obj={
            x0:10,
            x1:20,
            2:30 より
        }
        for(var k of Object.entries(obj)){
            コンソールログ(k);
        }

entry() メソッドは、配列のキーと値のペアを含む配列反復子オブジェクトを返します。

反復オブジェクト内の配列のインデックス値がキーとして使用され、配列要素が値として使用されます。

1. for-inループの落とし穴をすべて回避できる

2. forEach()とは異なり、break、continue、returnを使用できる。

3. for-of ループは配列の走査以上のものをサポートします。同じことが多くの配列のようなオブジェクトにも当てはまります。

4. 文字列の走査もサポートしています

5. for-ofは元のネイティブオブジェクトの処理には適していない

要約する

1. 'for...in' は、継承された列挙可能なプロパティを含む、オブジェクトのすべての '列挙可能な' プロパティを反復処理するために使用されます。この反復ステートメントは、配列文字列または通常のオブジェクトに使用できますが、Map オブジェクトまたは Set オブジェクトには使用できません。

2. 「for...of」は「反復可能」なオブジェクトに使用され、プロパティではなく値を反復処理します。この反復ステートメントは、配列、文字列、Map、または Set オブジェクトで使用できますが、通常のオブジェクトでは使用できません。

JS における for、for...in、for...of、forEach の違いと使用法についての記事はこれで終わりです。JS における for、for...in、for...of、forEach の違いについての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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