JavaScriptで配列を扱う際によく使用する4つの関数を簡単にまとめてみました。
- map : 各要素を別の値に変換した配列を生成する。
- filter : 条件に合った要素のみを含む配列を生成する。
- find : 条件に合った「最初の要素のみ」を取得する。
- reduce : 配列要素を単一の値に変換する。
map
map()メソッドは各要素を別の値に変換した配列を生成します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
例 : 配列の各要素を2乗する
JS
let map = [1,2,3,4,5].map( e => e*e ); console.log(map); // [1, 4, 9, 16, 25]
filter
filter()メソッドは条件に合った要素のみを含む配列を生成します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
例 : 配列から奇数の要素を取得する
JS
let filter = [1,2,3,4,5].filter( e => e % 2 ); console.log(filter); // [1, 3, 5]
find
find()メソッドは条件に合った「最初の要素のみ」を取得します。該当がない場合はundefinedが返ります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find
例 : 配列内で一番最初の奇数の要素を取得する
JS
let find = [1,2,3,4,5].find( e => e % 2 ); console.log(find); // 1
reduce
reduce()メソッドは配列要素を単一の値に変換します。
処理の結果はaccumulatorに蓄積されていきます。コールバック関数の第1引数でaccumulatorとなる変数を指定することができます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
例 : 配列内の要素の合計を取得する
JS
let reduce = [1,2,3,4,5].reduce( (acc,val) => acc + val ); // acc : accumulator, val : 現在値 console.log(reduce); // 15