JavaScriptの配列（Array）には、配列から配列やそれ以外の値を生成するメソッドがたくさんあります。
すべて覚える必要はありませんが、どんなことができるのか知っておくと違うものがあります。
この記事ではそんなメソッドのち、個人的によく使うものをいくつか紹介します。
配列を生成する
まずは、配列から新しい配列を生成するメソッドたちです。
これらは配列に対して、何らかの処理をした新しい配列を返します。
map
与えられた関数を全ての要素に対して呼び出し、その関数の戻り値を使った新しい配列を返します。
Arrayのmapメソッドと、連想配列のMapオブジェクトは全くの別物です。
ややこしいですが、特に関連はありません。
mapメソッドは引数callbackfnに関数を取ります。
callbackfnは以下の引数で内部的に呼び出されます。
-
element: 現在の要素 -
index: 現在の要素のインデックス -
array:mapが呼び出された配列（あまり使わない印象）
callbackfnの戻り値は新しい配列を生成するのに使われます。
例えば、数値の入った配列から、要素の数値を2乗した配列を取得できます。
このときcallbackfnは、引数elementの値を2乗した値を返すようにします。
const numbers = [1, 3, 5] // 数値の入った配列
// 要素を2乗した新しい配列を返す
numbers.map(n => n ** 2) // [1, 9, 25]
mapメソッドは非常に汎用的で、本当にさまざまなことに使えます。
詳しくはMDNをご覧ください。
filter
与えられた関数を全ての要素に対して呼び出し、trueを返した要素のみにフィルターした新しい配列を返します。
filterメソッドは引数callbackfnに関数を取ります。
この関数はmapと同じ引数で内部的に呼び出されます。
-
element: 現在の要素 -
index: 現在の要素のインデックス -
array:filterが呼び出された配列（あまり使わない印象）
例えば、数値の入った配列から偶数のみを抜き出すことができます。
このときcallbackfnは、引数elementが偶数かどうかを示すboolean値を返すようにします。
const numbers = [1, 3, 4, 6, 7]
// 偶数のみにフィルターする
numbers.filter(n => n % 2 === 0) // [4, 6]
詳しくはMDNをご覧ください。
slice
配列から一部の位置を切り出した、新しい配列を返します。
このとき元の配列に影響はありません。
sliceメソッドは以下の引数を取ります。
-
start: 切り出しを開始するインデックス- この位置の要素は含む
- 負の数の場合、最後から遡って数える
-
end: 切り出しを終了するインデックス- この位置の要素は含まない
- 負の数の場合、最後から遡って数える
- 省略した場合、最後の要素までが切り出される
例えばこのように切り出せます。
const numbers = [1, 4, 5, 7]
// 1番目から3番目（は含まない）を切り出す
numbers.slice(1, 3) // [4, 5]
// 2番目以降を切り出す
numbers.slice(2) // [5, 7]
詳しくはMDNをご覧ください。
値を生成する
ここからは、配列から配列以外の値を生成するメソッドを紹介します。
ここでは以下のメソッドを紹介します。
joinreduce
join
配列の要素を連結した文字列を返します。
これは文字列の生成に使えます。
例えばこのような感じです。
const fluits = ['apple', 'orange', 'remon']
fluits.join() // 'apple,orange,remon'
console.log(`fluits: ${fluits.join()}`) // fluits: apple,orange,remon
なお、通常は配列の要素同士を,で繋ぎますが、何で連結するかは引数で指定できます。
const fluits = ['apple', 'orange', 'remon']
fluits.join('&') // 'apple & orange & remon'
このメソッドは文字列の加工に使うことができます。
以下のような手順での加工は割と使うかもしれません。
-
文字列の
splitメソッドで文字列を分解して配列にする -
mapメソッドなどで文字ごとに加工する -
joinで配列を繋げて再度文字列にする
詳しくはMDNをご覧ください。
reduce
与えられた関数に基づいて配列を縮小します。
縮小というのは、特定の手順に基づいて値を更新していく感じです。
reduceメソッドは引数callbackfnに関数を取ります。
callbackfnは以下の引数で呼び出されます。
-
accumulator: 前の呼び出しのときに返された値 -
currentValue: 現在の値 -
currentIndex: 現在の値のインデックス -
array: 呼び出されている配列
また、callbackfnの戻り値は、そのまま次のaccumulatorに渡されます。
reduceメソッドはよく、数値が入った配列の和を計算するのに使われます。
const numbers = [1, 4, 5]
numbers.reduce((acc, cur) => acc + cur) // 10
上のコードはこのようなイメージです。
- 要素の最初の値を
accumulatorの初期値する -
accumulatorとcurrentValueを足した数値を返す
詳しくはMDNをご覧ください。