配列メソッドのチェーン
CoddyのJavaScriptジャーニー「論理とフロー」セクションの一部。レッスン 55/65。
配列のチェーン(メソッドチェーン)を使用すると、単一のステートメントで配列に対して複数の操作を実行できます。このアプローチにより、コードをより簡潔で読みやすくすることができます。
配列メソッドをチェーン接続する例を次に示します。
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この例では、数値の配列から始め、奇数を `filter` で取り除き、残ったそれぞれの数値を2倍にし、その結果を `sum` します。
チェーン化(メソッドチェーン)の順番は重要です。チェーン内の各メソッドは、前のメソッドの結果に対して操作を行います。
チャレンジ
簡単フルーツオブジェクトの配列を受け取る processFruits という関数を作成してください。各フルーツオブジェクトは name(文字列)と quantity(数値)のプロパティを持っています。
この関数はメソッドチェーンを使用して以下を行ってください:
quantityが 0 のフルーツを除外する (Filter)- 各フルーツの名前を大文字に変換する
- "APPLE: 5, BANANA: 3" のように、すべてのフルーツとその数量を一覧表示する文字列を作成する
簡単なヒント:
.join(", ") 関数を使用すると、文字列の配列を1つの文字列に変換できます。
.join() 関数もチェーンすることが可能です:
arr.filter(...)
.map(...)
.join(...)自分で試してみよう
function processFruits(fruits) {
// ここにコードを書いてください
}
このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
論理とフローのすべてのレッスン
自分で練習してみよう: JavaScriptオンラインコンパイラ