JavaScript における並置関数

JavaScriptJavaScriptBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、JavaScript における並置関数(Juxtapose Functions)の概念を探ります。複数の関数を引数として受け取り、同じ引数セットにそれらの関数を適用して結果の配列を返す新しい関数を作成する方法を学びます。この実験が終わるとき、並置関数を使ってコードを簡略化し、効率的にする方法をより深く理解しているでしょう。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic 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/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28459{{"JavaScript における並置関数"}} javascript/data_types -.-> lab-28459{{"JavaScript における並置関数"}} javascript/arith_ops -.-> lab-28459{{"JavaScript における並置関数"}} javascript/comp_ops -.-> lab-28459{{"JavaScript における並置関数"}} javascript/higher_funcs -.-> lab-28459{{"JavaScript における並置関数"}} javascript/spread_rest -.-> lab-28459{{"JavaScript における並置関数"}} end

並置関数の解説

juxt 関数を使用するには、まずターミナル/SSH を開き、コーディングの練習を始めるために node と入力します。juxt 関数はいくつかの関数を引数として取り、それらの関数の並置となる関数を返します。

juxt 関数を作成するには、Array.prototype.map() を使用して可変個の args を取ることができる fn を返します。fn が呼び出されたとき、それぞれの fnargs に適用した結果を含む配列を返す必要があります。

ここに juxt 関数の例の実装を示します。

const juxt =
  (...fns) =>
  (...args) =>
    [...fns].map((fn) => [...args].map(fn));

juxt 関数を定義したら、任意の数の関数を引数として渡し、それらの関数に渡す任意の数の引数を続けて渡すことで使用できます。

juxt 関数を使用するいくつかの例を以下に示します。

juxt(
  (x) => x + 1,
  (x) => x - 1,
  (x) => x * 10
)(1, 2, 3); // [[2, 3, 4], [0, 1, 2], [10, 20, 30]]
juxt(
  (s) => s.length,
  (s) => s.split(" ").join("-")
)("happy coding"); // [[18], ['happy-coding']]

最初の例では、juxt 関数は 3 つの関数を引数として取り、新しい関数を返します。その新しい関数に 1, 2, 3 の引数で呼び出されると、3 つの関数それぞれをそれらの引数に適用し、結果を含む配列の配列を返します。

2 番目の例では、juxt 関数は 2 つの関数を引数として取り、新しい関数を返します。その新しい関数に 'happy-coding' の引数で呼び出されると、2 つの関数それぞれをその引数に適用し、結果を含む配列の配列を返します。

まとめ

おめでとうございます!あなたは並置関数の実験を完了しました。あなたのスキルを向上させるために、LabExでさらに実験を練習することができます。