[JavaScript] 配列からひとつの値を生成する - reduce()

reduce()は配列内の値を順番に処理していき、最終的に1つの値を生成することができます。

/**
 * 配列の値をすべて足す
 */
const list = [1, 2, 3, 4, 5]
const sum = list.reduce( (prev, current) => prev + current )

// 15
console.log(sum)

returnした値が、次に処理する際のprevに入っています。returnする値は文字列や数値以外には配列やハッシュでもかまいません。初見だとちょっと理解しにくいかもしれませんねｗ

利用例

最大値/最小値を取り出す

大きかった方の値をreturnし続けることで最終的に最大値を取り出すことができます。等符号を逆にすれば最小値が取り出せます。

const list = [1, 2, 3, 4, 5, 4, 3, 2, 1]
const max = list.reduce( (prev, current) => ((prev > current)?  prev:current) )
const min = list.reduce( (prev, current) => ((prev < current)?  prev:current) )

console.log(max)  // 5
console.log(min)  // 1

配列から重複した値を取り除く

returnする値は配列やオブジェクトでも構いません。またreduce()は第2引数に一番最初に処理する値を別途指定することができます。

この2つの特性を利用して配列にすでに存在する要素であればスキップする処理が書けます。

const list = [1, 2, 3, 4, 5, 4, 3, 2, 1]
const newlist = list.reduce( (prev, current) => {
  if( prev.indexOf(current) === -1){
    prev.push(current)
  }
  return(prev)
}, [ ])

// [1, 2, 3, 4, 5]
console.log(newlist)

まぁ…同じ結果を得たいだけなら連想配列を使った方が良さそうな気もしますがｗ

2次元配列を1次元に変換する

先ほどと同じ特性を利用することで、多次元配列を1次元配列に変換できます。

const list = [ [1, 2],
               [3, 4],
               [5, 6] ]
const newlist = list.reduce( (prev, current) => prev.concat(current), [ ])

// [1, 2, 3, 4, 5, 6]
console.log(newlist)

参考ページ

• Array.prototype.reduce() - JavaScript | MDN