【JavaScript】Array.prototype.reduce()

Array.prototype.reduce()はややこしいな。

簡単な使い方
reduceメソッドで配列の中の数値をすべて足して合計値を求める。
reduceメソッドで配列の中の文字列をすべて連結した文字列を作る。
初期値に関しては、空の配列を初期値なしで実行するとエラーになったり、予期せぬ実行結果になったりする可能性があるため、初期値は設定した方がいい。
配列の中の文字列を連結したいならjoinメソッド使った方が記述内容も少なくて分かりやすいな。

reduce (他)を減らす

配列の中の数値を全部合計する処理にreduceメソッド使えるな。
しかし、なんでreduceという名前なんだ？「減らす」という意味だよな。

    let numbers = [1,2,3,4,5,6,7,8,9,10];
    let strings = ['あいうえお','かきくけこ','さしすせそ'];
    
    let result = numbers.reduce(function(sum, element) {
      return sum + element;
    },0);// 初期値として0を指定

    let result2 = strings.reduce(function(sum, element) {
      return sum + element;
    },'');// 初期値として空の文字列を指定

    console.log(result);
    console.log("typeof result = " + typeof result);
    
    console.log(result2);
    console.log("typeof result2 = " + typeof result2);
    
    let result3 = strings.join('');
    
    console.log(result3);
    console.log("typeof result3 = " + typeof result2);
    
/*

55
typeof result = number
あいうえおかきくけこさしすせそ
typeof result2 = string
あいうえおかきくけこさしすせそ
typeof result3 = string

*/

アロー関数式も使える。

    let numbers = [1,2,3,4,5,6,7,8,9,10];
    let strings = ['あいうえお','かきくけこ','さしすせそ'];

    let result = numbers.reduce(( sum, element ) => sum + element,0);
    console.log(result);
    console.log("typeof result = " + typeof result);
    
    
    let result2 = strings.reduce(( sum, element ) => sum + element,"");
    console.log(result2);
    console.log("typeof result2 = " + typeof result2);
    
/*

55
typeof result = number
あいうえおかきくけこさしすせそ
typeof result2 = string

*/

与えられた配列namesの中で最も長い文字列を見つける方法はreduceメソッドを使うとシンプルに実装できる。

reduceメソッドを使用して、アキュムレータ(accumulator)のprevと現在の変数currentを比較し、
より長い文字列を保持していくことで、最終的な最長の文字列を見つける。

アキュムレータ(accumulator)は、reduceメソッド内で使用される変数であり、
反復処理中に前の値を指す変数でもある。
reduceメソッドのコールバック関数内では、アキュムレータの値が更新され、次の反復ステップに引き継がれる。

最初のステップでは、初期値として空の文字列がprevに代入される。
それ以降の各ステップでは、現在の変数currentとアキュムレータprevの値を比較し、より長い文字列をprevに格納する。

以上の方法により、配列namesの中で最も長い文字列を求めることができる。

const names = ['url', 'scheme', 'slash', 'host', 'port', 'path', 'query', 'hash'];

const longestString = names.reduce((prev, current) => {
  return prev.length < current.length ? current : prev;
}, '');

const maxLength = longestString.length;

console.log("maxLength:" + maxLength);  // maxLength: 6

【JavaScript】Array.prototype.concatメソッドとArray.prototype.reduce()メソッド (attacktube.com)
【JavaScript入門】初心者でも分かるreduce()の使い方とサンプル例まとめ | 侍エンジニアブログ (sejuku.net) ExternalLink
【JavaScript基礎】Array.prototype.reduce() をしっかり理解する＆サンプル集 – KDE BLOG (hateblo.jp) ExternalLink

• 
• Tweet

• JavaScript