JavaScript の minBy 関数をマスターする

はじめに

この実験では、JavaScript の minBy 関数を調べます。minBy 関数は、各要素をある値にマッピングする関数に基づいて、配列の最小値を返します。この実験を通じて、提供された関数を使って minBy を使って配列の最小値を見つける方法を学びます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28331{{"関数に基づく配列の最小値"}} javascript/data_types -.-> lab-28331{{"関数に基づく配列の最小値"}} javascript/arith_ops -.-> lab-28331{{"関数に基づく配列の最小値"}} javascript/comp_ops -.-> lab-28331{{"関数に基づく配列の最小値"}} javascript/array_methods -.-> lab-28331{{"関数に基づく配列の最小値"}} javascript/higher_funcs -.-> lab-28331{{"関数に基づく配列の最小値"}} javascript/destr_assign -.-> lab-28331{{"関数に基づく配列の最小値"}} javascript/spread_rest -.-> lab-28331{{"関数に基づく配列の最小値"}} end

配列の最小値を返す関数

コーディングの練習を始めるには、ターミナル/SSH を開いて node と入力します。

この関数は、提供された関数に基づいて配列の最小値を返します。

これを行うには、Array.prototype.map() を使って各要素を関数が返す値にマッピングします。その後、Math.min() を使って最小値を取得します。

const minBy = (arr, fn) =>
  Math.min(...arr.map(typeof fn === "function" ? fn : (val) => val[fn]));

この関数を使うには、配列と関数を渡します。たとえば：

minBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], (x) => x.n); // 2
minBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], "n"); // 2

まとめ

おめでとうございます！関数に基づく配列の最小値の実験を完了しました。スキルを向上させるために、LabEx でさらに実験を行って練習してください。