mapメソッド
メソッドmapは、配列の各要素に指定された
関数を適用することを可能にします。この
メソッドは元の配列を変更せず、
変更された新しい配列を返します。
このメソッドはパラメータとして、配列の各要素に対して
実行される関数を受け取ります。
その関数がreturnを通して配列の要素に対して返す値が、
その要素の新しい値となります(例を参照)。
関数には3つのパラメータを渡すことができます。
これらのパラメータが存在する場合(必須ではありません)、
最初のパラメータには自動的に配列の要素が、
2番目のパラメータにはその配列内での番号(インデックス)が、
3番目のパラメータには配列自体が渡されます。
構文
let 新しい配列 = 配列.map(function(要素, インデックス, 配列) {
コード
return 変更された要素;
});
例
元の配列の対応する要素の2倍の値を持つ 新しい配列を作成しましょう:
let arr = [1, 2, 3, 4, 5];
let res = arr.map(function(elem) {
return elem * 2;
});
console.log(res);
コード実行結果:
[2, 4, 6, 8, 10]
例
各要素の値が「要素の値 × 配列内での順番(インデックス)」 となる配列を作成しましょう:
let arr = [1, 2, 3, 4, 5];
let res = arr.map(function(elem, index) {
return elem * index;
});
console.log(res);
コード実行結果:
[0, 2, 6, 12, 20]
例
必要に応じて、3番目のパラメータに配列自体を 渡すことができます:
let arr = [1, 2, 3, 4, 5];
let res = arr.map(function(elem, index, arr) {
// ここで配列arrが利用可能になります
});
例
メソッドmapは多次元配列の走査にも
使用できます。例えば、次のような配列が与えられたとします:
let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
この配列をmapで走査し、
その要素をコンソールに出力してみましょう:
let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
let result = arr.map(function(elem) {
console.log(elem);
});
結果としてconsole.logは[1,
2, 3]、次に[4, 5, 6]、
その次に[7, 8, 9]を出力します。
ご覧の通り、変数elemには部分配列(サブ配列)が
渡されます。では、各サブ配列にmapメソッドを
適用して、その各要素を2乗してみましょう:
let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
let result = arr.map(function(elem) {
return elem.map(function(num) {
return num * num;
});
});
console.log(result);