実際のプロジェクトで最もよく使われる4つの配列メソッドを使って、データを変換・絞り込み・集計する方法を学びます。
このレッスンを Kodokon で開く実際のプロジェクトでは、データを変換することに時間を費やします。表示する商品のリスト、並べ替えるAPIの結果、合計を出すカートなど。map、filter、reduce、find メソッドは、あなたの for ループのほとんどを、より短く表現力豊かなコードに置き換えます。これらは元の配列を決して変更しません。新しい結果を返すので、あるクラス全体のバグを防げます。
const products = [
{ name: "keyboard", price: 49, inStock: true },
{ name: "mouse", price: 25, inStock: false },
{ name: "screen", price: 199, inStock: true }
];
const names = products.map((product) => product.name);
console.log(names); // ["keyboard", "mouse", "screen"]filter はテストを通過した要素だけを残し、空になる可能性もある新しい配列を返します。find は最初に一致した要素で止まり、要素そのものを返します。何も一致しなければ undefined を返します。頭の体操: 在庫のある商品をすべて取得するには、どちらを選びますか? そして"mouse"という名前の商品を1つ取得するには?
const available = products.filter((p) => p.inStock);
console.log(available.length); // 2
const mouse = products.find((p) => p.name === "mouse");
console.log(mouse.price); // 25reduce は最も強力です。配列を単一の値(数値、オブジェクト、文字列)に還元します。アキュムレータと現在の要素を受け取る関数に加えて、初期値を取ります。典型的なユースケース: カートの合計を計算することです。
const cart = [
{ label: "T-shirt", quantity: 2, unitPrice: 15 },
{ label: "Cap", quantity: 1, unitPrice: 12 }
];
const total = cart.reduce(
(sum, item) => sum + item.quantity * item.unitPrice,
0
);
console.log(total); // 42適切なメソッドを選ぶには、自分に1つ質問してください。結果はどんな形であるべきか? 元と同じ数の要素だが変換されたもの: map。部分集合: filter。単一の要素: find。計算された単一の値: reduce。この反射的な判断は、面接でもプロジェクトでも貴重な時間を節約してくれます。
find は何を返しますか?cart.reduce((sum, item) => sum + item.unitPrice, 0) の中で、最後の 0 は何のためのものですか?