JavaScriptで、配列の要素を元に処理を行い、結果を取得するreduce()メソッドとreduceRight()メソッドの使い方

JavaScriptで配列を扱う際、要素を利用した計算などの処理を行い、その結果だけを取得したいケースがあります。

そんな時はreduce()メソッドやreduceRight()メソッドが便利です。

構文

メソッド

構文意味返り値
配列.reduce(コールバック関数,[初期値(省略可)]) 各要素を左から右に処理して単一の値を生成する処理結果
配列.reduceRight(コールバック関数 ,[初期値(省略可)]) 各要素を右から左に処理して単一の値を生成する 処理結果
reduce() reduceRight()

コールバック関数

構文意味
([前の要素], [後の要素] ,[インデックス ],[元配列 (省略可) ]) => {任意の処理} 処理結果
reduce() reduceRight()のコールバック関数

サンプルコード

足し算

サンプルコードとして、数字の足し算を行うスクリプトを書いてみたいと思います。

Output
reduce()メソッドで足し算
reduceright()メソッドで足し算
Pug
.container.my-5
	div
		table.table
			tbody
				tr
					th reduce()メソッドで足し算
					td#targetText
				tr
					th reduceright()メソッドで足し算
					td#targetText2
JavaScript
const targetText = document.getElementById( 'targetText' );
const targetText2 = document.getElementById( 'targetText2' );

const postDatas = [100,200,300,400,500,600,700,800,900,1000];
const postDatas2 = [100,200,300,400,500,600,700,800,900,1000];

const sum = postDatas.reduce((previous, current) => {
		return previous + current;
});

const sum2 = postDatas.reduceRight((previous, current) => {
		return previous + current;
});

targetText.textContent = sum;
targetText2.textContent = sum2;

2次元配列を1次元配列にまとめる

reduce()メソッドやreduceRight()メソッドは、2次元配列を1次元配列にする(フラット化する)という目的でも利用することができます。

Output
reduce()メソッドで配列をフラット化
reduceright()メソッドで配列をフラット化
Pug
.container.my-5
	div
		table.table
			tbody
				tr
					th reduce()メソッドで配列をフラット化
					td#targetText
				tr
					th reduceright()メソッドで配列をフラット化
					td#targetText2
JavaScript
const targetText = document.getElementById( 'targetText' );
const targetText2 = document.getElementById( 'targetText2' );

const postDatas = [['りんご','みかん','ばなな'],['ぶどう','もも','れもん']];
const postDatas2 = [['りんご','みかん','ばなな'],['ぶどう','もも','れもん']];

const sum = postDatas.reduce((previous, current) => {
		return previous.concat(current);
});

const sum2 = postDatas.reduceRight((previous, current) => {
		return previous.concat(current);
});

targetText.textContent = sum;
targetText2.textContent = sum2;
インストラクター
コメント

コメントを残す