TypeScript mapとfilterで配列を変換する
mapとfilterは、配列から新しい配列を作るメソッドです。
どちらも元の配列を変更しませんが、役割は異なります。要素数を保ったまま各値を変換するならmap、条件に合う要素だけへ減らすならfilterを使います。副作用を実行したいだけのforEachとは、戻り値が必要かどうかで使い分けます。
mapで各要素を変換する
const prices = [100, 200, 300];
const pricesWithTax = prices.map((price) => Math.floor(price * 1.1));
console.log(pricesWithTax); // [110, 220, 330]mapは元の配列と同じ要素数の配列を返します。元のpricesは変更されません。
オブジェクトから必要な値だけを取り出すこともできます。
type Product = {
productId: string;
name: string;
price: number;
};
const products: Product[] = [
{ productId: 'p1', name: 'ノート', price: 200 },
{ productId: 'p2', name: 'ペン', price: 100 },
];
const names = products.map((product) => product.name);
// ['ノート', 'ペン']filterで条件に合う要素を取得する
const expensiveProducts = products.filter((product) => product.price >= 200);条件がtrueになった要素だけで新しい配列を作ります。
mapとfilterを続けて使う
const expensiveProductNames = products
.filter((product) => product.price >= 200)
.map((product) => product.name);最初に価格で絞り込み、その結果から商品名だけを取得しています。
処理の順序を逆にすると、mapの後は文字列の配列になるためpriceを参照できません。
findとの違い
filterは条件に合うすべての要素を配列で返します。最初の1件だけ必要な場合はfindを使用します。
const product = products.find((item) => item.productId === 'p2');
console.log(product?.name); // ペン対象がない場合、findはundefinedを返します。
forEachは各要素に処理を行いますが、戻り値はundefinedです。変換した配列が必要な場合はmapを使用します。
要素の変換にはmap、絞り込みにはfilter、1件の検索にはfindを使い分けます。