配列メソッドのチェーン
CoddyのJavaScriptジャーニー「論理とフロー」セクションの一部 — レッスン 55/65。
配列のメソッドチェーンを使用すると、1つのステートメントで配列に対して複数の操作を実行できます。このアプローチにより、コードをより簡潔で読みやすくすることができます。
配列メソッドをチェーン化する例を次に示します：
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = numbers
.filter(num => num % 2 === 0)
.map(num => num * 2)
.reduce((sum, num) => sum + num, 0);
console.log(result); // 60この例では、数値の配列から始め、奇数を除外し、残った各数値を2倍にしてから、その結果を合計します。
チェイニングの順序は重要です。チェーン内の各メソッドは、前のメソッドの結果に対して動作します。
チャレンジ
簡単フルーツのオブジェクトの配列を受け取る processFruits という関数を作成してください。各フルーツのオブジェクトは、name (文字列) と quantity (数値) というプロパティを持っています。
この関数は、メソッドチェーンを使用して以下の処理を行う必要があります：
- quantity が 0 のフルーツを除外する
- 各フルーツの名前を大文字に変換する
- すべてのフルーツとその数量を "APPLE: 5, BANANA: 3" のような形式でリストした文字列を作成する
ヒント：
.join(", ") 関数を使用すると、文字列の配列を1つの文字列に変換できます。
.join() 関数もメソッドチェーンに組み込むことが可能です：
arr.filter(...)
.map(...)
.join(...)チートシート
配列メソッドのチェーン（連結）を使用すると、1つのステートメントで配列に対して複数の操作を実行できるため、コードがより簡潔で読みやすくなります。
チェーン内の各メソッドは、前のメソッドの結果に対して操作を実行します：
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = numbers
.filter(num => num % 2 === 0)
.map(num => num * 2)
.reduce((sum, num) => sum + num, 0);
console.log(result); // 60.join() メソッドをチェーンして、配列を文字列に変換することもできます：
arr.filter(...)
.map(...)
.join(", ")自分で試してみよう
function processFruits(fruits) {
// ここにコードを記述してください
}
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
