map、filter、reduceは、オブジェクトを並べ替える方法です.これはとても役に立つ方法で、一緒に理解してみましょう.

1.map

mapは、各配列要素に対して所定の関数を実行した結果をまとめ、新しい配列に返します。

const twice = ["사나", "모모", "나연"];

const twiceHi = twice.map((v, i, a) => {
	return `안녕하세요 ${a}의 ${i + 1}번째 멤버 ${v}입니다!`
})

console.log(twiceHi)
//'안녕하세요 사나,모모,나연의 1번째 멤버 사나입니다!',
//'안녕하세요 사나,모모,나연의 2번째 멤버 모모입니다!',
//'안녕하세요 사나,모모,나연의 3번째 멤버 나연입니다!'

ここでは、パラメータの役割も理解できます.

1番目のパラメータはアレイの現在の要素

2番目のパラメータはアレイ内の現在の要素のインデックス

3番目のパラメータは元のアレイの要素を表示します.

2.filter

filterは、各アレイ要素に対して所定の関数のテスト結果を収集し、新しいアレイに戻ります。

const twice = ["사나(일)", "모모(일)", "나연(한)"];

const twiceJapen = twice.filter((v, i, a) => {
  	if(v.includes('일')){
    	return `안녕하세요 ${a}의 일본인 멤버 ${v}입니다!`
    }
})

console.log(twiceJapen)
//[ '사나(일)', '모모(일)' ]

ここでは、パラメータの役割も理解できます.

1番目のパラメータはアレイの現在の要素

2番目のパラメータはアレイ内の現在の要素のインデックス

3番目のパラメータは元のアレイの要素を表示します.

😄でもmapのように新しい文に変えてもだめだと思いますフィルタは配列を変更できません.

3.reduce

reduceは配列内の各要素に対して関数を実行し、計算された累積結果を返します。

const twice = ["사나 ", "모모 ", "나연"];

const twiceReduce = twice.reduce((acc, cur, i) => {
      console.log(acc, cur, i)
      return acc + cur
},'안녕하세요! ')

console.log(twiceReduce + "입니다!")
//안녕하세요! 사나  0
//안녕하세요! 사나 모모 1
//안녕하세요! 사나 모모 나연 2
//안녕하세요! 사나 모모 나연입니다!

ここでは、パラメータの役割も理解できます.

最初のパラメータはアレイに蓄積されたアレイの要素

2番目のパラメータはアレイの現在の要素

3番目のパラメータは、現在の要素のインデックスを表示します.

しかしreduceは少し複雑です。

最初のループの時にconsoleを見たら皆さんこんにちは!サナ出てきて0
Sana 0は現在の要素とインデックスであることがわかります.
最初のパラメータaccこんにちは!みんなに見せてね
reduceは配列内の要素の累積値を返します.したがって、最初の配列要素と2番目の配列要素が加算されると考えられますが、正確には、蓄積された配列要素(最初のパラメータ)と「現在の値(2番目のパラメータ)」が加算されます.
したがって、最初のサイクルでは、蓄積された要素は何もないので、初期値(「こんにちは!」をreduceの2番目のパラメータとします.もちろん、2番目のパラメータに何も入れなくても正常に動作します.
reduceの代表的な第2の例.

const arr = [1, 2, 3];

const arrSum = arr.reduce((acc, cur, i) => {
      console.log(acc, cur, i)
    	return acc + cur
},10)

console.log(arrSum)
//10 1 0
//11 2 1
//13 3 2
//16

acc=累積値、
cur=現在の値、
i=インデックス

第1リング

acc=(初期値が10なので)10;cur =1, i = 0

だいにかん

acc = 11; cur =2, i = 1

第3ループ

acc = 13; cur =3, i = 2

これでは分かりやすいようです.

map、filter、reduceはデータをより効率的に処理できるので、それらを熟知する必要があります。🤠