JavaScriptのreduce()を使ってみる

JavaScriptのreduce()メソッドを使ってみます。

サンプルコード

reduce()メソッドは指定した配列内の各値に対して、コールバック関数で指定した処理を行います。
その処理の際、1つ前の値の処理結果を取得できるので、配列内の値の和の取得などができます。

const arr = [1, 2, 3, 4];

const result = arr.reduce(function(previousValue, currentValue, currentIndex, array) {
	console.log(previousValue, currentValue, currentIndex, array);
	return previousValue + currentValue;
});

console.log('result', result);
// expected output: 10

この場合のconsoleの出力結果は以下のようになります。

1 2 1 [1, 2, 3, 4]
3 3 2 [1, 2, 3, 4]
6 4 3 [1, 2, 3, 4]
result 10

reduce()のデモページ

reduce()には第一引数にコールバック関数(callbackFn)、第二引数にはコールバック関数が初めて呼び出された時の初期値(initialValue)を設定できます。

第一引数のコールバック関数は4つの引数を持ちます。

previousValue 前回のコールバック関数の結果の値。
currentValue 現在の配列要素の値。
currentIndex 配列内の現在の位置。
array 処理対象の配列。

先ほどの例だとinitialValueが設定されていなかったので、設定したパターンも試してみます。

const arr = [1, 2, 3, 4];

const result = arr.reduce(function(previousValue, currentValue, currentIndex, array) {
	console.log(previousValue, currentValue, currentIndex, array);
	return previousValue + currentValue;
}, 5);

// 5 + 1 + 2 + 3 + 4
console.log('result', result);
// expected output: 15

先ほどの例では1回目のpreviousValueは配列1番目の「1」が入り、処理自体は2番目の「2」から3回行われましたが、今回の場合は1回目のpreviousValueは初期値で設定した「5」が入り、処理自体は配列1番目の「1」から4回行われました。

5 1 0 [1, 2, 3, 4]
6 2 1 [1, 2, 3, 4]
8 3 2 [1, 2, 3, 4]
11 4 3 [1, 2, 3, 4]
result 15

reduce()のデモページ2

initialValueで空配列やオブジェクトを渡して、各値を処理して追加して別途配列を作成するといった使い方もできます。

const arr = [
	{
		"title": "titleC",
		"date": "2021-11-21",
		"body": "bodyC"
	}, {
		"title": "titleB",
		"date": "2021-11-20",
		"body": "bodyB"
	}, {
		"title": "titleA",
		"date": "2021-11-14",
		"body": "bodyA"
	}
];

const result = arr.reduce(function(previousValue, currentValue, currentIndex, array) {
	previousValue.push({
		"title": currentValue.title,
		"date": currentValue.date
	});
	return previousValue;
}, []);

console.log('result', result);

reduce()のデモページ3
他にも色々な使い方ができそうです。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年10月
 1
2345678
9101112131415
16171819202122
23242526272829
3031