【JavaScript】配列を操作するmapの使い方

2021年4月14日

JavaScriptで配列を操作する時に多用する便利なメソッド、mapについてまとめました。

mapとは、配列を元に新たな配列を生成する関数

mapは、配列を元に、新たな配列を生成するメソッドです。

引数で指定した関数を通じて、返却された値が配列の中身となります。

簡単な使用例として、mapを使用して、配列の中身をすべて倍にした配列を返す処理を書いてみました。

var array = [1, 2, 3, 4, 5];

aryResult = array.map(function(value){
    return value * 2; //returnされた値が新たな配列の中身になる
});

console.log(aryResult);

var array = [1, 2, 3, 4, 5];

aryResult = array.map(value => {
    return value * 2; //returnされた値が新たな配列の中身になる
});

console.log(aryResult);

var array = [1, 2, 3, 4, 5];

aryResult = array.map(value => value * 2);

console.log(aryResult);

既存の関数を指定してmapを実行

先ほどまでのサンプルコードは、map内で関数を書く、いわゆる「無名関数」の書き方でしたが、既存の関数を元にmapを実行することが出来ます。

function double(no){
    return no * 2;
}
    
var array = [1, 2, 3, 4, 5];

aryResult = array.map(double);

console.log(aryResult);

mapとfor、forEachの違い

mapは配列を元に新たな配列を生成するメソッドであり、配列を繰り返すfor、forEachとは用途が全く違います。

for、forEachは配列を繰り返して中の値を取得する構文であり、mapのように新たな配列を返したりはしません。

var array = [1, 2, 3, 4, 5];

//for in文
for(key in array){
    console.log('forin : ' + array[key]);
}

//forEach文

array.forEach(function(value){
    console.log('forEach : ' + value);
});

まとめると、

• map : 配列を取得する
• for、forEach : 配列を繰り返して中の値を順に取得する

という違いがあるので、用途に応じて使い分けましょう。

mapでキー(index)を取得したい場合

map内の関数の処理で、配列のindexを使用したい場合は、第二引数を定義する必要があります。

下記は、配列の中身をすべてmapでキーに置き換えた処理です。

var array = [10, 100, 1000, 10000, 100000];

aryResult = array.map(function(value, index){
    return index;
});

console.log(aryResult);

mapでreturnしなかった値はnullが返る

mapでreturnで返却しなかった値があった場合は、それはnullとして配列に含まれます。

var array = [10, 100, 1000, 10000, 100000];

aryResult = array.map(value => {
    if(value >= 1000){
        return value * 2;    
    }
});

console.log(aryResult);

mapは配列内すべての値に処理を施すメソッドなので、特定の値は省きたい、などの処理には向いていません。

特定の値を省くフィルタリングを行いたい場合は、filter()というメソッドがあるのでそれを使用しましょう。

var array = [10, 100, 1000, 10000, 100000];

aryResult = array.filter(value => {
    if(value >= 1000){
        return value * 2;    
    }
});

console.log(aryResult);

JavaScriptで配列の中から検索した値を取得・削除するfilterの使い方

連想配列(Object)でmapを操作する

先ほどのサンプルコードで書いた、「一律で数値を倍にする」という処理は実際あまり行いません。

その代わり、mapは、オブジェクトが絡んだ配列（連想配列）で使用することが多いです。

apiで取得したjson形式のデータは、連想配列になっていることが多いですからね。

連想配列のプロパティをmapで抽出する

例えば、下記のようなシンプルな連想配列があったとします。

var array = [
    {'no' : 0, 'name' : 'tanaka'},
    {'no' : 1, 'name' : 'sato'},
    {'no' : 2, 'name' : 'yamamoto'},
];
console.log(array);

この配列のnameの部分を、単一の配列として取得したい場合は、mapを使用することで一行で取得が出来ます。

var array = [
    {'no' : 0, 'name' : 'tanaka'},
    {'no' : 1, 'name' : 'sato'},
    {'no' : 2, 'name' : 'yamamoto'},
];

aryResult = array.map(value => value['name']);

/*
//こういう風にも書けます
aryResult = array.map(value => {
    return value['name'];
});
*/

console.log(aryResult);

mapで配列から連想配列を生成する

逆に、配列を元に連想配列を生成することも出来ます。

先ほどの名前のみの配列に、noというプロパティを付けた連想配列を生成してみます。
noはとりあえずindexを当てはめます。

var array = ['tanaka', 'sato', 'yamamoto'];

aryResult = array.map(function(value, key){
    return {'no' : key, 'name' : value};
});

console.log(aryResult);

このように、mapを使用して、扱いやすい連想配列を生成することが出来ました。

mapはデータ処理にとても便利な関数なので、利用機会が多いです。

是非使いこなして、効率的な開発を進めていきましょう。