今回は、mapメソッドとfilterメソッドについて。
ちょうど、配列を使って、検索機能を実装しないといけなくなり、filterを使うとよさそうなことを聞き、急いで調べました。
完成ソース
従来の配列の仕方とmapメソッド、filterメソッドを使用した方法の2パターンで記述しています。
See the Pen map&filter method by komame (@komame) on CodePen.
mapメソッドとfilterメソッドについて
配列を出力するだけなら、for文やforEach文でも問題なさそうですが、このmapメソッドは呼び出して処理した配列を新しく生成することができます！
ですので、処理をした配列を別の処理で使用したい場合に、使えるメソッドのようです。
実際のソースを見てみましょう。
まずは、従来の配列の記述はこちら。配列の数をループして、出力。そして、newArrayという配列の変数にpushする必要があります。
for(let i=0; i < array.length; i++){
const val = array[i] * 2;
arrayText.innerHTML += val;
if(val > 50){
// 配列に追加する
newArray.push(array[i] * 2)
}
}こちらが、mapメソッドとfilterメソッドを記述して、同じ処理をしてみました。
たったの一行で、できるんですね！一緒にすると、複雑にみえるので、これを別々に記述してみます。
const newArray4 = array.map(val => val * 2).filter(val => val > 50);mapメソッド
まず、mapメソッドの構文は、下記。
配列.map([要素],[インデックス],[元配列])=> 変更後の要素
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
map()メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
実際の記述はこちら。
// mapメソッドを使って、配列を出力する書き方。
const newArray2 = array.map( (val, i, array) => {
// console.log(val);
// console.log(val,i);
// console.log(array);
return val * 2;
});ちなみに、arrayは配列が下記になります。
const array = [10, 20, 30, 40];ですので、console.logで出力されるのは、valがそれぞれの配列の要素となり、10、20、30が順に出力されます。
iはインデックスですので、添字が出力されます。
arrayは、元になる配列なので、上記のarrayが出力されます。
そして、コールバックで、それぞれの値に2倍をして、newArray2に、新しい配列が出力されます。
20,40,60,80今回は、単純に2倍の値を返しているだけですが、もっと複雑な処理をして、新しく配列を出力したいときに、使えます。
filterメソッド
filterメソッドは、ある配列から条件を満たす、別の配列を作りたいときに、使います。構文は、下記。
配列.filter([要素],[インデックス],[元配列]) => 真偽値
実際の記述はこちら。newArray2というのは、先ほどのmapメソッドで2倍にした配列ですね。
const newArray3 = newArray2.filter(val => val > 50);20,40,60,80ですので、上記の中から、50以上のものを配列として出力するので、60,80の配列がnewArray3に格納されます。
文章でみても、わかりづらいと思うので、完成コードを見たほうがいいかもしれません。
いろいろと記述しましたが、下記の記事のほうが分かりやすいかもです。
まとめ
正直なところ、mapとfilterの使い分けがまだよくわかっていません。。。現在、検索機能を実装しているので、filterのほうがよく使っている印象です。
いろいろ記述してみて、違いがわかったら、また追記しようと思います。
