map()メソッド/forEach()メソッド

理解できないところを整理する
注:BigTop Log

map()

mapメソッドとは?配列内の各要素が所定の関数を呼び出した結果を要約し、新しい配列を返す方法.for of文またはforeachは、重複配列内の要素の重複文であり、重複が返される結果ごとに新しい配列を生成する点で独特です.

const myArr = [1, 2, 3, 4, 5];

const newMyArr = myArr.map((currentElement, index, array) => {
    return currentElement * 2
});

console.log(newMyArr); // [2, 4, 6, 8, 10]

mapメソッドは、要素、index、および現在のmapメソッドを呼び出す配列であるパラメータコールバック関数を受け入れます.
3番目の配列はあまり使いにくく、通常は1番目の要素と2番目のインデックスが使用されます.
名前の通り、要素は、繰り返しが発生するたびに0番インデックスから対応する各要素を割り当て、indexも対応するインデックスです.

const myArr = [1, 2, 3, 4, 5];

const newMyArr = myArr.map((currentElement, index, array) => {
    console.log(`요소: ${currentElement}`);
    console.log(`index: ${index}`);
    
    return currentElement * 2
});

console.log(newMyArr); // [2, 4, 6, 8, 10]

次の結果が出力されます.

ここまでforeachと何の違いもありませんが、最後の10行で確認したように、このメソッドを実行する位置で配列が返されているかどうかという違いがあります.
その結果,mapの核心は呼び出しメソッドの配列長と等しい新しい配列を生成することであり,コールバック関数の戻り値によって新しい配列の各要素を変更できることを特徴とする.
foreachの機能が含まれていると考える場合があるので、このような作業はmapのみを使用し、個人的にはできるだけ目的に合った最適化文法を使用するのが望ましいと思います.
次のコード

const myArr = [1, 2, 3, 4, 5];
const assignMyArr = myArr;
const mapMyArr = myArr.map((el) => {    
    return el
});

console.log(myArr); // [1, 2, 3, 4, 5]
console.log(assignMyArr); // [1, 2, 3, 4, 5]
console.log(mapMyArr); // [1, 2, 3, 4, 5]

3行目でmapメソッドのコールバック関数を実行する場合は、未使用のパラメータを省略できます.
要素値だけを返すと、同じ配列が作成されます.
それでも、マッピング方法で作成されたアレイは新しいアレイです.
配列の要素が同じであっても、下図のように各配列を一致して比較すると、結果値に差があります.

console.log(myArr === assignMyArr); // true
console.log(myArr === mapMyArr); // false

最後に、mapメソッドのコールバック関数が何も返されない場合.
呼び出し配列の長さに等しい未定義の配列を返します.

const myArr = [1, 2, 3, 4, 5];
const mapMyArr = myArr.map(() => {});

console.log(mapMyArr); // [undefined, undefined, undefined, undefined, undefined]

forEach()

forEach()メソッドは、与えられた関数をパラメータ(パラメータ)としてそれぞれアレイ要素に対して実行するアレイに使用可能なメソッドです.map()メソッドとほとんど似ていますが、戻り値がないという違いがあります.

const myArr = [1, 2, 3, 4, 5];

const newMyArr = myArr.forEach((currentElement, index, array) => {
    console.log(`요소: ${currentElement}`);
    console.log(`index: ${index}`);
    console.log(array);
});

console.log(newMyArr); // undefined

forEachメソッドはmapメソッドと同様にパラメータコールバック関数を受け入れ、そのコールバック関数のパラメータは要素、インデックス、および現在のmapメソッドを呼び出す配列である.
forEachメソッドでは、3番目の配列もあまり使用されません.通常、1番目の要素と2番目のインデックスが使用されます.
前述したように、mapメソッドとは異なり、コールバック関数が返す値を単独で収集して処理するプロセスがないため、呼び出しメソッドのコードを関数に割り当てると、定義されていない値が割り当てられます.
したがって、forEachメソッドは、通常、変数に割り当てるのではなく、繰り返し文や条件文などの直接呼び出しです.

const myArr = [1, 2, 3, 4, 5];

myArr.forEach((currentElement, index, array) => {
    console.log(`요소: ${currentElement}`);
    console.log(`index: ${index}`);
    console.log(array);
});

上記のコードを実行した結果は次のとおりです.

mapメソッドに示すように,使用しないコールバック関数のパラメータ(後から順に)は省略できる.

const myArr = ['강아지', '고양이', '햄스터', '거북이', '이구아나'];

myArr.forEach((el, i) => {
    console.log(i);
    console.log(el);
    if(el === '고양이') {
    	myArr.shift();
    }
})

console.log(myArr); // ["고양이", "햄스터", "거북이", "이구아나"]

呼び出しメソッドの配列は、forEachメソッドのコールバック関数で変更することもできます.
上記のコードに示すように、ある場合に要素を削除すると、次の要素を検索すると、変更された配列で対応するindexが検索されるため、このコードの実行結果を表示すると、猫の後にカメが出力されます.
メソッドの実行後にmyarrを表示すると、犬が配列から削除されたことを確認できます.

リファレンス

shift()メソッドは、配列から最初の要素を削除し、削除した要素を返します.この方法では、配列の長さが変更されます.