【javascript】アロー関数を使ってmap関数をスマートに使う
配列に対してforでごにょごにょすることが多いためmap関数について調べてみたところ、見事に泣きそうになったので、学習記録を整理しておきます。
map関数とは
「配列内のすべての要素に対して、同じ処理を加えた新しい配列を返す」関数。
たとえば、
array1 = [0,1,2,3,4,5]
があったとして、全部の数を二倍した新しい配列
array2 = [0,2,4,6,8,10]
を作りたいときに、forでぶんまわしてごにょごにょしないでも、一行で新しい配列を作れます。便利~
STEP0:map関数の「基本的な」使い方
var func = function nibai(value){return value * 2};
var baseArray = [1,2,3,4,5];
var newArray = baseArray.map(func);
console.log(newArray); // =>[2,4,6,8,10]
1:引数を一つ取り、引数を二倍にして返すnibai関数を作り、変数funcに代入する
2:baseArrayを作る
3:baseArrayのmapメソッドを使い、引数として1で作った関数(を代入した変数func)を渡す
4:mapメソッドが、配列の中身を一つずつnibai関数に渡して結果を受け取る(←ここが外から見えにくいので混乱しがち)
5:すべての値が2倍になった配列が得られる
STEP1:関数を別に定義するのが面倒なので、無名関数を使う
var baseArray = [1,2,3,4,5];
var newArray = baseArray.map(function(value){return value * 2});
console.log(newArray); // =>[2,4,6,8,10]
ちなみに、map関数の使い方でググると、大体のサンプルはここをスタートとして書いてある。
が、ここがスタートだと、無名関数滅びろ教のへっぽこSEには、「無名関数の引数valueはどこから出てきた???」ということが理解できなかった。無名関数滅びろ。
STEP2:無名関数でも増長なので、ナウいアロー関数を使うために、アロー関数の書き方を学ぶ
アロー関数がナウいね!とはよく聞くんですが、いまいちよくわからないので整理します。
0:まず基本のfunctionの書き方。
let sample = function(value){return value * 2};
1:アロー(=>)を使って「function」を省略
let sample = (value) => { retrun value * 2};
2:{}の中が一行なら、returnも{}も省略できる
let sample = (value) => value * 2;
3:引数が1つなら、()も省略できる
let sample = value => value * 2;
これでよく見るアロー関数の出来上がり。
アロー関数にはそのほかにも普通のfunctionと挙動が違う部分があるらしいけど、へっぽこなので、その辺はまた今度必要になったら学習します。
STEP3:map関数にアロー関数を使う
おさらい:普通の書き方
var baseArray = [1,2,3,4,5];
var newArray = baseArray.map(function(value){return value * 2});
console.log(newArray); // =>[2,4,6,8,10]
funcitonを省略
var baseArray = [1,2,3,4,5];
var newArray = baseArray.map((value) => {return value * 2});
console.log(newArray); // =>[2,4,6,8,10]
関数一行なので、returnと{}を省略
var baseArray = [1,2,3,4,5];
var newArray = baseArray.map((value) => value * 2);
console.log(newArray); // =>[2,4,6,8,10]
引数1個なので、()も省略
var baseArray = [1,2,3,4,5];
var newArray = baseArray.map(value => value * 2);
console.log(newArray); // =>[2,4,6,8,10]
これで、よく見るサンプルの出来上がり。
この記事が気に入ったらサポートをしてみませんか?