ECMA Script6（JavaScript）の配列のmapメソッドの使い方

2017/12/7 ECMA Script6

ECMA Script6（JavaScript）の配列のmapメソッドの使い方についです。

mapメソッドは配列の要素を編集して返却するメソッドです。元の配列を破壊することはありあせん。

記述方法は以下のように記述します。

let arr = [ { name: 'taro', age: 20 }, { name: 'jiro', age: 32 } ];
let ret = arr.map((e) => e.age);
console.log(ret);

let arr = [ { name: 'taro', age: 20 }, { name: 'jiro', age: 32 } ];

let ret = arr.map((e) => e.age);

console.log(ret);

結果は以下のようになります。

[ 20, 32 ]

1	[ 20, 32 ]

元の配列と同じ要素数返却されます。filterメソッドと併用することが多いかと思います。

配列のmapメソッドでオブジェクト配列を返す方法

配列からmapメソッドでオブジェクトを返す方法です。

let arr = [ { name: 'taro', age: 20 }, { name: 'jiro', age: 32 } ];
let ret = arr.map((e) => ({a:e.name,b:e.age}));// オブジェクトを()で囲むこと
console.log(ret);

let arr = [ { name: 'taro', age: 20 }, { name: 'jiro', age: 32 } ];

let ret = arr.map((e) => ({a:e.name,b:e.age}));// オブジェクトを()で囲むこと

console.log(ret);

結果は以下のようになります。

[ { a: 'taro', b: 20 }, { a: 'jiro', b: 32 } ]

1	[ { a: 'taro', b: 20 }, { a: 'jiro', b: 32 } ]

これも配列の要素がオブジェクトに変わっただけで、要素数が変わることはありません。

mapメソッドからfilterメソッドを使って不要な要素を絞る

filterメソッドは関数の条件がtrueの条件のみ絞って抽出してくれます。

mapしてfilterするというのはよくあるロジックです。

let arr = [ { name: 'taro', age: 20 }, { name: 'jiro', age: 32 } ];
let ret = arr.map((e) => ({a:e.name,b:e.age}));// オブジェクトを()で囲むこと
let a = ret.filter((e) => e.a === 'taro');
console.log(a);// [ { a: 'taro', b: 20 } ]が返ってくる