【Javascript】map, filter, reduceの使い方

スポンサーリンク
スポンサーリンク

map

const myArray = [0, 1, 2, 3, 4, 5]
// それぞれ2倍する
const result = myArray.map(function(value){
    return value * 2
})
console.log(result)
// Array(6) [ 0, 2, 4, 6, 8, 10 ]

filter

const myArray = [0, 1, 2, 3, 4, 5]
// 3未満の数字を抽出する
const result = myArray.filter(function(value){
    return value < 3
})
console.log(result)
// Array(3) [ 0, 1, 2 ]

reduce

const myArray = [0, 1, 2, 3, 4, 5]
// 合計値を求める
const result = myArray.reduce(function (accumulator, currentValue) {
    return accumulator + currentValue
  })
console.log(result)
// 15

初期値ありバージョン

const myArray = [0, 1, 2, 3, 4, 5]
// 合計値を求める(初期値に10000をセット)
const result = myArray.reduce(function (accumulator, currentValue) {
    return accumulator + currentValue
  }, 10000)
console.log(result)
// 10015

おまけ

アロー関数も使用できます。

const myArray = [0, 1, 2, 3, 4, 5]
// それぞれ2倍する
const result = myArray.map(value => {
    return value * 2
})
console.log(result)
// Array(6) [ 0, 2, 4, 6, 8, 10 ]

簡略化した使い方しか記載していませんが、実際にはもっと複数の引数を取ることができます。

参考

Array.prototype.map() - JavaScript | MDN
map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
Array.prototype.reduce() - JavaScript | MDN
reduce() メソッドは、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。
Array.prototype.filter() - JavaScript | MDN
filter() メソッドは、この配列の中から、提供された関数で実装されたテストに合格した要素のみを抽出したシャローコピーを作成します。

コメント

タイトルとURLをコピーしました