配列を扱う様々なメソッド

初めに

TypeScriptを勉強していて、配列を扱う際に様々なメソッドがあることを知ったので、自分へのメモ・知識の共有の為に今回の記事を書きました。

map

mapメソッドは配列の全ての要素を呼び出し、新しい配列を作成します。

const array = [1, 2, 3, 4, 5];
const NewArray = array.map(x => x*2);
console.log(NewArray);
// [LOG] : [2, 4, 6, 8, 10]

array配列に格納されている値1~5を順番に取り出し、取り出した値を二倍した値を新しい配列NewArrayを作成し格納しています。

filter

filterメソッドは与えられた関数に対してtrue(真)の値全てを新しい配列を作成し格納します。

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const NewArray = array.filter(x => x % 2 == 0);
console.log(NewArray);
// [LOG] : [2, 4, 6, 8, 10]

array配列に格納されている値1~10を順番にテストします。今回であれば「2で割った余が0」つまり偶数の値だけがtrue(真)になるので偶数だけの新たな配列NewArrayが作成されます。

reduce

reduceメソッドは与えられた配列の全ての値に対して関数を実行し単一の値を返します。

const array = [1, 2, 3, 4, 5];
const NewArray = array.reduce((acc,cur) => acc + cur);
console.log(NewArray);
// [LOG] : 15

array配列に格納されている値を全て加算します。1+2+3+4+5=15なので計算結果である15を返します。

reduceメソッドに関してドキュメント等をしっかり読みましたが理解できていない部分がありそうです。
正確な挙動を解説できていない可能性がございます。

findIndex

findIndexメソッドはfilterと似ていますが挙動としましては配列を作成するのではなく、指定した関数のtrue(真)になる最初の位置を返します。tureにならなかった場合は-1を返します。

const array = [1, 2, 3, 4, 5];
const NewArray = array.findIndex(x => x > 4);
console.log(NewArray);
// [LOG] : 4

array配列に格納されている値で、4より大きくなる位置を探します。今回であれば値が4より大きくなる位置は4番目なので4を返します。

終わり

今回の記事は以上で終わります。最後まで見ていただきありがとうございます。