for、for..in、forEach、for..of、マップトラバーサルの違い

1.forループ

**
for ループは私たちが最初に学ぶループの 1 つであり、初心者が最もよく使用するループでもあり、配列や文字列のループによく使用されます。オブジェクトには長さのプロパティがないため、for ループを使用してオブジェクトを反復処理することはできません。Break を使用してループを終了できます

for ループ

for(let i=0;i<arr.length;i++){
    
    
	console.log(arr[i])
}

2. for...in ループ

for...in の本来の目的はオブジェクトを走査することでした。配列を走査するためにも使用できます。ただし、ループされるのは配列の添え字ではなく、配列のプロパティです。for... を使用する場合ループ内では、オブジェクトを通じてアクセスできるすべてのオブジェクトが返され、配列自体のプロパティだけでなく、配列プロトタイプチェーン上の列挙可能なすべてのプロパティも走査されます。
たとえば、次のように事前に中断することができます。

Array.prototype.fatherName = "Father";
const arr = [1, 2, 3];
arr.name = "Hello world";
let index;
for(index in arr) {
    
    
    console.log("arr[" + index + "] = " + arr[index]);
}

出力結果:
ここに画像の説明を挿入します

3、…の

for...of ループは、Es6 で新しく追加されたループメソッドです。for in ループに似ており、通常の for ループの変形でもあります。for of ループを使用すると、配列やその他の走査可能なオブジェクトを簡単に走査できます、文字列、オブジェクトなど。for...of ループは、オブジェクトのキー値を走査することによってオブジェクトを走査するため、オブジェクトを走査するために for of を使用することはお勧めできません。
たとえば、次のように事前に中断することができます。

const obj = {
    
     "name": "Clark", "surname": "Kent", "age": "36" };
// 使用 for of 循环遍历对象中的所有属性
for (let value in obj) {
    
    
    console.log(value + ',')
}

出力結果:
ここに画像の説明を挿入します

4. forEach ループ

forEach は単純に強力です。配列やコレクションの種類に関係なく、forEach を使用してそれを処理できます。すべての要素が呼び出し関数に渡されるまで、break やその他のステートメントを使用してトラバーサルから抜け出すことはできませんが、次のことはできます。例外をスローしてループを早期に終了するために使用します。例
:

const arr = [1, 2, 3, 4, 5];
arr.forEach(function(e) {
    
    
    console.log(e);
})

ブレークが追加されると、プログラムはエラーを報告します。
ここに画像の説明を挿入します
forEach で return を使用してもエラーは報告されませんが、rerutn は有効になりません
。次に例を示します。

let arr = [1, 2, 3, 4];

function find(array, num) {
    
    
    array.forEach((self, index) => {
    
    
        if (self === num) {
    
    
            return index;
        };
    });
};
let index = find(arr, 2);
console.log(index);

実行結果:
ここに画像の説明を挿入します
インデックスが未定義であるため、find 関数がデータを返さないことがわかります。したがって、forEach で return を使用してもエラーは報告されませんが、rerutn は有効になりません。forEach は、デフォルトではインデックス 0 からのみトラバースを開始できます。

5. マップトラバース

map() メソッドは新しい配列を返します。配列内の要素は、関数呼び出し後の元の配列要素の値です。

(1) 注:

	map（）不会对空数组进行检测
    map()不会改变原始数组

例えば：

const num = [1, 2, 3];
const newNum = num.map((ele, index) => {
    
    
    return ele + 3
})
console.log(newNum, num);

操作結果:
ここに画像の説明を挿入します

(2) 戻り値

上に示したように、戻り値は新しい配列であり、配列内の要素は関数呼び出し後の元の配列要素の値です。