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