filter()、forEach()と調べたので、ついでにmap()についても調べてみました。
map()とは
map()を正しく書くとArray.prototype.map()となりArray(配列)に使われるメソッドです。map()を実行すると配列の要素に1つずつに対して処理を行います。
filter()、forEach()、map() との違い
同じような処理が行えるfilter()、forEach()、map()ですが、用途によって使い分けが必要です。
filter()は配列を条件によって絞り込む際に使用します。戻り値あり。
forEach()は単純に配列の中に同じ処理をする時に使用します。戻り値なし。
map()は配列の中身を違った形にする際に使用します。戻り値あり。
構文 Syntax
// 構文
array.map( 処理);
処理の書く際にはアロー関数を使用するのを多く見かけます。
const numbers = [ 10, 20, 30 ];
let result = numbers.map(myFunction);
function myFunction(num) {
return num * 10;
}
console.log(result); // [ 100, 200, 300 ]
functionの引数について
処理の引数は以下のようになります。filter()やforEach()と同じです。
// 構文
array.forEach(function(currentValue, index, arr), thisValue)
少し複雑に感じますが、わかれば簡単に使いこなせそうです。
- currentValue : arrayの中の各要素です。必須
- index : 要素のindexです。オプション
- arr : arrayのarrayオブジェクトです。オプション
- thisValue : thisとして値を渡せます。空の場合、「undefined」がthisの値として渡されます。
currentValue, index, arr の中身を確認するサンプルコード
const numbers = [10, 11, 12];
numbers.forEach(myFunction);
function myFunction(item, index, arr) {
console.log(“item = ” + item );
console.log(“index = ” + index );
console.log(“arr = ” + arr );
}
結果
item = 10
index = 0
arr = 10,11,12
item = 11
index = 1
arr = 10,11,12
item = 12
index = 2
arr = 10,11,12
thisValueの中身を確認するサンプルコード
const numbers = [10, 11, 12];
numbers.forEach(function(currentValue, index, arr) {
console.log(this); // 123
}, 123);
thisの値が123となります。
サンプルコード
const persons = [
{ name : “Nakamoto”, age: 50 },
{ name : “Kato”, age: 28 },
{ name : “Sasaki”, age: “42” }
];
function nameAge(item) {
let nameAge = [item.name,item.age].join(” “);
return nameAge;
}
console.log(persons.map(nameAge)); // [ “Nakamoto 50”, “Kato 28”, “Sasaki 42” ]
おわり
filter()、forEach()、map()の使い分けが少し難しく感じます。
使い方が分かると使いたくなるけれど、しばらく使うことがなさそうです。
参考
https://www.w3schools.com/jsref/jsref_map.asp
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
