【js（配列操作）】map()
map()とは
ループ処理
配列限定
foreachとの違いは”返り値”を返すのでreturnの記述を忘れずに
書き方
配列の変数+.map(コールバック関数);
<button>処理開始</button>
//ある配列がある let items = [5,10,15,20,25]; //mapのループ処理の中で各値を2倍にして返している $('button').click(function(){ let result = items.map(function(value){ return value * 2 ; }); console.log(result); });
【結果】
前： [5, 10, 15, 20, 25]
後：[10, 20, 30, 40, 50]
【解説】
map内の処理を、配列すべての値に対してループ処理で行っている。
必ず、returnは記述すること。
★.map箇所を.foreachにすると、たとえreturnを記述していても、返り値がundefinedになる。
返り値が必要な場合はとにかく「.map」!!
「map」のコールバック関数の応用でさらに便利に…！
value, index, array
「map」のコールバック関数の引数にvalue, index, arrayを入れるとそれぞれ下記。
・「value」は、配列の値
・「index」は、配列のインデックス番号
・「array」は、現在処理している配列
【使いどころ】
index番号を何かしらの条件にする必要がある時。
例）偶数番目の値を2倍にする。
補足：
index番号は0開始なので、仮に配列の先頭を”1つ目”としてカウントする場合は、
index番号が（「配列の値が」ではない）偶数ではない時に値を2倍するという記述になるので注意。
<button>処理開始</button>
//ある配列がある let items = [5,10,15,20,25]; //mapのループ処理の中で各値を2倍にして返している $('button').click(function(){ let result = items.map(function( value,index,array ){ if(index % 2 !== 0){ return value * 2 ; }else{ return value ; } }); console.log(result); });
【結果】
前：[5, 10, 15, 20, 25]
後：[5, 20, 15, 40, 25]
※見た目上で偶数番目だけ、2倍になっている。
【解説】
map内の処理を、配列すべての値に対してループ処理で行っている。
必ず、returnは記述すること。
ちなみに、「map」は元の配列データに一切変更を加えない特徴がありますが、3つ目の引数「array」を利用すれば、元のデータそのものを変更することも可能です！（グローバル変数のイメージなので関数外でも使える）
//ある配列がある let items = [5,10,15,20,25]; //mapのループ処理の中で各値を2倍にして返している $('button').click(function(){ items.map(function(value,index,array){ array[index] = value * 2 ; }); console.log(items); });
第二引数にオブジェクトを入れる
ループ処理に、別のオブジェクトの情報と関連付けて処理したい。
例）ある生徒たちの出身校を、一覧で表示したい。
【使いどころ】
あるオブジェクトがある。
そのオブジェクトを軸にユーザーのアクションごとに動的にオブジェクトの値を活用したいとき。
※オブジェクトだけでなく、変数などもOK！
<h1>出身校表示</h1> <button>出身校検索</button> <div> <ul id="show-list"> </ul> </div>
//生徒と出身校のオブジェクト const ROSTER = { '田中太郎' : '東京大学', '鈴木洋一' : '神奈川大学', '澤田和樹' : '明治学院大学', '巻楓' : '専修大学', 'ユリン' : '一橋大学', '本田啓介' : '法政大学', '長谷部隼' : '関西大学', '横山美咲' : '宮崎大学', }; //ある生徒たちのグループ let students_groupA = ['鈴木洋一', '澤田和樹', 'ユリン', '横山美咲']; //group_A配列の生徒の出身校を出したい $('button').click(function(){ //出身校配列の作成 let groupA_schools = students_groupA.map(function(student){ return ROSTER[student]; },ROSTER); //ループ処理でHTMLで表示 groupA_schools.forEach(function(school_name){ //let ID_show_list = document.getElementById('show-list'); $('#show-list').append('<li>' + school_name + '</li>'); }); });
【結果】
