こんにちは、もちきなこです。今日は、typescriptの関数であるmap()とfilter()について、学んだことを共有していきます。今まで、javascriptを少ししか触ったことがなくて、今回の案件でじっくりtypescriptに触れて、型があるってめんどくさいけど素晴らしいなと思っています。
map()関数
map()は、配列それぞれの値に対して、処理を行い、新しい配列として、元の配列を変えずに返すことができます。
例えば、
const numbers = [1, 2, 3, 4, 5];があったとします。
Javaなどだと、この配列の値をそれぞれ二倍にするには、基本的にfor分などで配列の要素を繰り返して、それぞれの配列の値に対して×2を行い、新しく作った配列に追加していきます。(ほかにも方法はあるかもしれないですが)
int[] doubled = new int[]
for(int number: numbers){
doubled.add(number * 2);
};typescriptだと、
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]というような感じで終わります。
これが生きてくるのが、オブジェクトを配列に入れた時で、イメージとしては、データベースのレコードのデータ配列を取得したときといった方がよいかもしれません。
そのようなオブジェクト型の配列をmap()で回すと、オブジェクトの型構造をそれぞれのレコードで同じように編集することができます。
例えば、最初の取得データが一つのテーブルに紐づいているすべてのデータを取得していた場合に、画面に表示するのにいらない変数を削除し、データ構造を変えることができるのです。
filter()関数
filter()は配列の各要素に対して条件をチェックし、条件を満たす要素だけを集めて、元の配列を変えずに、新しい配列を返すことができます。
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]この関数も、大量のデータの中で条件を満たす一部の配列だけを表示させたい処理などを行うときに役立ちます。
コメント