JavaScriptでの配列操作に使うメソッドについては、これまでにも過去記事でまとめてきました。今回で5回目となる本記事では、引き続き配列を自由に扱うのに必須なメソッドを見ていきたいと思います。

（参考記事）
JavaScriptで配列を扱う時によく使うメソッド＃1【配列の作成・値や総数の取得・空判定など】
JavaScriptで配列を扱う時によく使うメソッド＃2【配列の値に対して繰り返し処理を行う】
JavaScriptで配列を扱う時によく使うメソッド＃3【配列に値が含まれるか・値のインデックスを検索する】
JavaScriptで配列を扱う時によく使うメソッド＃4【配列から条件に合う値を取得・フィルタリングする】

Array.map()

元の配列の値から、別の配列を作成する場合には「Array.map()」を使うと便利です。引数にはコールバック関数をとり、その中で、新たに配列を生成するための処理を記述します。

【javascript】

const arrayObject = [
 { name: 'りんご', price: 100 },
 { name: 'みかん', price: 80 },
 { name: 'ぶどう', price: 300 },
 { name: 'いちご', price: 500 }
];
const result = arrayObject.map((value) => {
 return value.price;
});
console.log(result);

【console】

[100, 80, 300, 500]

上記ではオブジェクト型の値を持つ配列において、特定のキーの値をそれぞれ抽出して、新たな配列として作成しています。このように複雑なオブジェクトを持つ配列を切り分けるのに使うと便利ですね。

また、Array.map()では、元の配列にある値を変えた上で、新たな配列として作り出すことも可能です。その際にはコールバック関数内で、値を変えるための処理を記述します。下記の例では、金額に対して税込みの値にして配列を作成するサンプルになります。

【javascript】

const tax = 0.1
const result = arrayObject.map((value) => {
 return value.price + value.price * tax;
});
console.log(result);

【console】

[110, 88, 330, 550]

このように値は元の配列のものから変化しているのがわかります。

Array.reduce()

複数存在している配列の値を、一つの値として生成する場合には「Array.reduce()」を使います。引数にはコールバック関数と、初期値の値を取り、さらにコールバック関数の引数には、累計値と、現在の値、インデックスを取ります。

【javascript】

const arrayData = [ 100, 80, 300, 500 ];
const result = arrayData.reduce((prev, current) => {
 return prev + current;
});
console.log(result);

【console】

980

Array.reduce()の使用例として、このような配列の値の合計を算出するなどがあります。出力されるのは1つの値になっているのが確認できます。累計値に現在の値が加算され、配列の値の数だけ順番に処理される形になります。ちなみに「Array.reduceRight()」を使うと、配列の後ろの値から処理されるようになります。

その他にもArray.reduce()はいろんな活用方法があります。例えば、下記のように配列の値をオブジェクトに変換することも可能です。

【javascript】

const arrayData = [ 100, 80, 300, 500 ];
const result = arrayData.reduce((prev, current, index) => {
 prev[index] = { 'price': current }
 return prev;
}, []);
console.log(result);

【console】

[
 { 'price': 100 },
 { 'price': 80 },
 { 'price': 300 },
 { 'price': 500 }
]

このような場合、Array.reduce()の第二引数に初期値を設定するようにします。ここでは空の配列を初期値に設定しています。こうすることで、初期値の値から処理が始まるようになります。

まとめ

【配列の値から別の配列を作成する】

Array.map(( value ) => { callback });

【配列の値から単一の値を算出する】

Array.reduce(( prev, current ) => { callback });

もしくは

Array.reduce(( prev, current, index ) => { callback }, initialvalue);

今回のメソッドは、使い所がわかりにくいかもしれませんが、うまく活用することで、かなりコードが短縮できるのではないでしょうか。特にフロント側でデータの加工や整形をする場合にはかなり高い頻度で登場するので、ぜひ覚えておきたいメソッドですね。Array.map()とArray.reduce()は一見よく似ていますが、出力するものが配列か単独の値かで使い分けると良いですね。

（こちらの記事もどうぞ）
JavaScriptで配列を扱う時によく使うメソッド＃1【配列の作成・値や総数の取得・空判定など】
JavaScriptで配列を扱う時によく使うメソッド＃2【配列の値に対して繰り返し処理を行う】
JavaScriptで配列を扱う時によく使うメソッド＃3【配列に値が含まれるか・値のインデックスを検索する】
JavaScriptで配列を扱う時によく使うメソッド＃4【配列から条件に合う値を取得・フィルタリングする】