JavaScript map() の使い方！連想配列で説明！

けど、そんな中で悩むことは、

ですよね。

今回はそんなお悩みを解決する

についてまとめます！

JavaScript map() とは

JavaScript map() とはJavaScriptのメソッドで配列のすべての要素を呼び出し、その結果を新しい配列として返すことができます。

具体的には要素一個づつにコールバック関数という関数を実行し、その値を配列の形式で指定した形式で取得していきます。

JavaScript map() とforEachの違いはなに

JavaScript map() とforEachの違いについて説明をします。

どちらも配列の要素を取得する処理となりますが、forEachは取得した要素を変数で返すのに対して、map() メソッドは配列で返すという違いがあります。

JavaScript map() のメリット

map() メソッドは取得した要素を配列として返すので、配列全体に処理を加えたいときにシンプルなコードで済ませることができます。
以下forEachとコードの内容を比較してみましょう。

map() メソッドの場合

配列[1,2,3]の各要素に3を加える処理をするコードとなります。
map() メソッドの場合は以下となります。

let arrTemp = [1,2,3];
var result = arrTemp.map(( value ) => {
    //各要素に3を加えます。
    return value + 3;
});
console.log( result );

結果です。

タカヒロ

コールバック関数の「( value ) =>」の書き方はアロー関数といいます。
通常は「function( value ) 」の書き方となります。

forEachの場合

forEachの場合は以下となります。

let arrTemp = [1,2,3];
let arrTemp2 = [];
arrTemp.forEach(( value ) =>; {
    //各要素に3を加え、新規配列に代入します。
    arrTemp2.push(value + 3);
});
console.log( arrTemp2 );

結果です。

タカヒロ

forEachで配列の結果を返したいときはmap()を使った方がシンプルであるということがわかりますね。

JavaScript map() で連想配列を処理する

より理解を深めるためJavaScript map() で連想配列を処理してみましょう。

連想配列とは

そもそも連想配列とは何かについて説明をします。
連想配列とは配列でキーと値のセットですが、連想配列はキーを添え字により値を割り振ることができます。
通常の配列ですと、キーは連番、つまり数値ですが、連想配列は文字列になりますので、文字により値を特定することができるというわけです。

JavaScript map() で連想配列の値を抽出する

map() メソッドで連想配列の値を抽出してみましょう。

配列のname要素を返します。

let arrTemp = [{ name:'taro', age:40 }];
 
var result = arrTemp.map(( value ) => {
    //配列のname要素を返します。
    return value.name;
});

console.log( result );

結果です。

JavaScript map() で連想配列の複数の値を抽出する

次はmap() メソッドで連想配列の複数の値を抽出してみましょう。

連想配列にリストをカンマ区切りで追加していきます。

let arrTemp = [
{ name:'taro', age:40 },
{ name:'hanako', age:24 },
{ name:'jiro', age:32 },
];
 
var result = arrTemp.map(( value ) => {
    //配列のname要素を返します。
    return value.name;
});

console.log( result );

結果です。

age要素も抽出してみましょう。

let arrTemp = [
{ name:'taro', age:40 },
{ name:'hanako', age:24 },
{ name:'jiro', age:32 },
];
 
var result = arrTemp.map(( value ) => {
    //配列のage要素を返します。
    return value.age;
});

console.log( result );

結果です。

タカヒロ

キーとなる添え字を変更することで、取得したい要素が絞られることが確認できましたね。

JavaScript map() で条件に合致した連想配列の複数の値を抽出する

map() メソッドで条件に合致した連想配列の複数の値を抽出してみましょう。

条件はageが30以上であればnameを抽出するという内容となります。

以下サンプルコードです。

let arrTemp = [
{ name:'taro', age:40 },
{ name:'hanako', age:24 },
{ name:'jiro', age:32 },
];
 
var result = arrTemp.map(( value ) => {
    //ageが30以上であればnameを抽出します。
    if( value.age > 30 ){
        return value.name;
    }else{
        return "";
    }
});

console.log( result );

結果です。

mapメソッドのretuenに直接条件式を設定する

mapメソッドのretuenに直接条件式を設定することも可能です。

let arrTemp = [
{ name:'taro', age:40 },
{ name:'hanako', age:24 },
{ name:'jiro', age:32 },
];
 
var result = arrTemp.map(( value ) => {
    //ageが30以上であればnameを抽出します。
    return value.age > 30 ? value.name : ""
});

console.log( result );

結果です。

タカヒロ

Ifがないので違和感がありますが、かなりシンプルになりましたね。

mapメソッドとfilterメソッドを組み合わせる

mapメソッドとfilterメソッドを組み合わせて絞り込むことができます。

let arrTemp = [
{ name:'taro', age:40 },
{ name:'hanako', age:24 },
{ name:'jiro', age:32 },
];
 
const result = arrTemp.map( value => value ).filter(value => value.age > 30 );

console.log( result );

結果です。

mapメソッドの代わりにfilterメソッドを使う

mapメソッドの代わりにfilterメソッドを使い絞り込むことも可能です。

let arrTemp = [
{ name:'taro', age:40 },
{ name:'hanako', age:24 },
{ name:'jiro', age:32 },
];
 
const result = arrTemp.filter(val => val.age > 30 );

console.log( result );

結果です。

さいごに

いかがでしょうか。

今回は、

についてまとめました。

また、他にも便利な方法がありますので、よろしければご参照頂ければと思います。