javasciprtを扱う場合、結構頻繁に使用することであろうmapについて、簡単に整理しておこうと思います。。
この記事では最初にtypescriptで書いていきますが、記事の後ろにjavascriptバージョンも載せておきます。
typescriptで書いてみる
基本的な書き方
array1のそれぞれの値を2倍にしてarray2に格納する簡単な使い方を確認してみる。
その結果をconsole.logで表示。
const array1: number[] = [1, 2, 3, 4, 5]; const array2: number[] = array1.map(value => value * 2); console.log(array2);
上記実行した結果は以下のようになります。
[ 2, 4, 6, 8, 10 ]
map([引数] => [処理])の形で書けます。
この例は処理が簡単なのでコンパクトに書けていますが、処理が複雑になってくると一行で書くのが難しくなります。
そうした時には次のような書き方にします。
mapの条件にもっと記載したい時
アロー関数を使えば、関数として記載できるので自由に処理を書くことができます。
const array1: number[] = [1, 2, 3, 4, 5];
const array3: number[] = array1.map(value => {
const val = value * 2;
return val;
});
console.log(array3);
上記実行した結果は以下のようになります。
[ 2, 4, 6, 8, 10 ]
例では、簡単に2倍にしてるだけですが、
複雑な処理を行った結果、レコード単位に値を好きに編集して返すといったことも可能です。
行連番を処理で使いたい場合
条件の処理の中で行連番を使いたい場合というのは結構ありますよね。
そういう時は第二引数を取得して使用できます。
const array4: number[] = array1.map((value: number, index: number) => {
const val = value * index;
return val;
});
console.log(array4);
上記実行した結果は以下のようになります。
[ 0, 2, 6, 12, 20 ]
これは各値に行の連番(0〜)をかけていっています。
行番号を取得したい場合にはmap()の第二引数にindexで取得することができます。
行連番を取得して処理に使いたい場合に活用します。
javascriptの場合
同じような書き方ではあるのでtypescriptの書き方がわかれば、問題なく書くことができると思いますが、
念の為javascriptバージョンも載せておきます。
基本的な書き方
var array1 = [1, 2, 3, 4, 5];
var array2 = array1.map(function (value) { return value * 2; });
console.log(array2);
上記実行した結果は以下のようになります。
[ 2, 4, 6, 8, 10 ]
mapの条件にもっと記載したい時
var array1 = [1, 2, 3, 4, 5];
var array3 = array1.map(function (value) {
var val = value * 2;
return val;
});
console.log(array3);
上記実行した結果は以下のようになります。
[ 2, 4, 6, 8, 10 ]
行連番を処理で使いたい場合
var array4 = array1.map(function (value, index) {
var val = value * index;
return val;
});
console.log(array4);
上記実行した結果は以下のようになります。
[ 0, 2, 6, 12, 20 ]
まとめ
mapは非常によく使用します。
最初は抵抗があるかもしれませんが、慣れると非常に便利です。
私の場合は、filterなどと組み合わせて使うことが多いです。
使用頻度は決して低くないので、基本はおさえておきましょう
