reduce()関数の定理

💡 定義や文法の説明を見て理解するより、使い方や例を見て理解するほうがずっと簡単です.

定義＃テイギ＃

MDNで定義されている定義は次のとおりです.
reduce()メソッドは、アレイ内の各要素に対して所与のreducer関数を実行し、結果値を返します.

構文の説明

reduce()メソッドは、配列に使用できます.

const arr = [1, 2, 3, 4, 5];
const initialValue = 0;

arr.reduce((accumulator, currentValue, currentIndex, array) => { 
	return accumulator + currentValue;
}, initialValue);

reduce()メソッドの最初のパラメータは、アレイ内の各要素に対して実行されるコールバック関数です.
2番目のパラメータは、コールバック関数の最初の呼び出しで最初のパラメータに与えられた値です.(必須x)
コールバック関数では、次のパラメータを使用できます.

accumulator

アキュムレータと呼ばれ、コールバック関数の戻り値が積算されます.前回呼び出したコールバック関数の戻り値を表すか、最初の呼び出しであればinitialValueがあればinitialValueを返すこともできます.

currentValue

アレイの現在の要素

currentIndex

配列の現在の要素のインデックス.InitialValueがある場合は0から、または1から開始します.

array

ソースアレイ

使用方法

基本的な使用法を表す例は、アレイに値を循環的に追加する例です.以下に示します.

const arr = [2, 4, 6, 8, 10];
const result = arr.reduce((acc, cur) => acc + cur); 
console.log(result);

// 결과
// 30

上記の手順を次のように1つずつ記録します.

const arr = [2, 4, 6, 8, 10];
const result = arr.reduce((acc, cur) => {
	console.log(acc, cur);
	return acc + cur;
});

console.log(result);

// 결과
2 4 // initialValue가 없으므로 acc는 배열의 arr[0] 값, cur은 arr[1]의 값이 들어온다.
6 6 // 콜백 함수에서 acc + cur을 리턴해주므로 acc 에는 누적된 값, cur에는 arr[2]의 값이 들어온다.
12 8 // 이하 반복
20 10

30

例

reduce()配列にのみ使用されるループ加算値は少し残念です.
役に立つ例をいくつか紹介します.

オブジェクトを属性に分類

学生情報を含む配列オブジェクトを学年別に分類するには、次の方法を使用します.

const students = [
  { name: 'Alice', age: 10, grade: 4 },
  { name: 'Max', age: 9, grade: 3 },
  { name: 'Jane', age: 11, grade: 4 },
  { name: 'John', age: 9, grade: 3 },
];

const groupByGrade = students.reduce((acc, obj) => {
   const key = obj['grade'];
    if (!acc[key]) {
        acc[key] = [];
    }
     
    acc[key].push(obj);
   
    return acc;
}, {});

console.log(groupByGrade);

// 결과
{
	3: [
				{ name: 'Max', age: 9, grade: 3 },
				{ name: 'John', age: 9, grade: 3 },
		 ],
	4: [
				{ name: 'Alice', age: 10, grade: 4 },
				{ name: 'Jane', age: 11, grade: 4 },
		 ]

奇数のみ追加

よく使われる論理ではありませんが、アルゴリズムの問題を解決するのに役立ちます.

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

const result = arr.reduce((acc, cur) => {
    if (cur % 2 !== 0) {
        acc += cur;
    }

    return acc;
}, 0);

console.log(result);

// 결과
9

プラス記号(特定の値を除く)

配列に特定の値を含む値以外の値を追加するには、次の手順に従います.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const notWant = [1, 4, 10];

const result = numbers.reduce((acc, cur) => notWant.includes(cur) ? acc : acc += cur , 0);

console.log(result);

// 결과
40