配列でよく使う4つの関数のチートシート – JavaScript

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

Related Posts