JavaScript : foreachとmapを使うべきですか?

JavaScriptのコースのクラスに進むたびに、私は従来のループを離れてforeachに行く瞬間に気づいた​​このポストはテキストでこの説明を不滅にすることです.私の学生や学生、どれだけあなたが今この疑いを持っている可能性があります.

導入

あなたが以下の3つのコードを取るならば、彼らはすべてブラウザで同じリターンをします.

const names= ['Whinds', 'Freeway', 'Teste', 'Maria'];

for(let i = 0; i < names.length; i = i + 1 ) {
    console.log('[for]', names[i]);
}

const names = ['Whinds', 'Freeway', 'Teste', 'Maria'];

names.forEach(function(name, i) {
    console.log('[forEach]', name, i);
})

const names = ['Whinds', 'Freeway', 'Teste', 'Maria'];

names.map(function(name, i) {
    console.log('[forEach]', name, i);
})

最初に、結果が同じであるならば、彼らは同じことをすると仮定することができます.しかし、foreachとmapを少し見ると、ここではインデックス変数(通常はIと呼ぶ)について心配する必要はありません.これはループを制御するのに使用されます.
しかし、私たちがそれを書いていない間、このデータは私たちにアクセス可能であることに注意するのは簡単です.これをより明確にするために、foreachの可能な実装を見てみましょう.

The implementation doesn't work in the array.map and array.forEach models, because for that we would need to mess with the prototype and that alone yields a post.

foreachを理解する

以前は、ループ内のすべての項目を通してforeachループを見ました.これはループの場合と同じように、内部的にLOPを持っているからです.実装するなら、以下のコードのようになります.

function ourForEach(arr, function) {
    for(let i = 0; i < arr.length; i = i + 1) {
        function(arr[i], i);
    }
}

ourForEach(['name', 'name2'], function(name, index) {
    console.log(name, index)
})

Whenever you are going to do a for loop, it's worth using a forEach, as it eliminates the mental burden of having to deal with control variables and therefore can help make the code easier to read, taking into account that this is an overused form in the JavaScript world in general.

地図の理解

実際、我々がポストの冒頭で見たように、地図とforeachは同じことをするようです、しかし、違いは我々が彼らから出て来るもののリターンを分析するとき、来ます.

const names = ['Whinds', 'Freeway', 'Teste', 'Maria'];

const returnForEach = names.forEach((currentName) => {
    console.log(currentName);

    return currentName.toUpperCase();
})
console.log(returnForEach) // undefined

const names= ['Whinds', 'Freeway', 'Teste', 'Maria'];

const returnMap = names.map((currentName) => {
    console.log(currentName);

    return currentName.toUpperCase();
})
console.log(returnMap ) // ['WHINDS', 'FREEWAY', 'TESTE', 'MARIA']

foreachはforループの代わりになるように作られましたが、マップは配列の項目の変換/変更操作をするように作られました、そして、これらの操作の終わりに我々は基本リストとしてアイテムの同じ数で新しいリストを持っています.
マップを実装する場合、この行のコードを終了します:

function ourMap(arr, function) {
    const newArray = [];
    for(let i = 0; i < arr.length; i = i + 1) {   
        newArray .push(function(arr[i], i));
    }    
    return newArray 
}

ourMap(['name', 'name2'], function(name, index) {
    console.log(name, index)
})

これにより、マップの作成やフィルタの追加などの操作を連結することが容易になります.マップの戻り値が配列の場合、この行にコードを書くことができます.map ().filter ()を使用します.

結論

それはこのポストのためのすべてです、私たちがちょうどよりエレガントな方法を望むならば、我々が使用することが明らかであることを願っています.foreachと値を変換/変更したい場合​​あるいは、配列の上で操作を連結します.マップが最適です.