マッピングされた配列の差分：JavaScript の differenceBy 関数を探る

はじめに

この実験では、JavaScript における differenceBy 関数の実装方法を検討します。この関数を使うと、2 つの配列の各要素に対して指定された関数を適用することで、両方の配列の違いを見つけることができます。特定の基準に基づいて配列を効果的に比較およびフィルタリングするために、Set、Array.prototype.map()、および Array.prototype.filter() をどのように使うかを学びます。

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/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") subgraph Lab Skills javascript/variables -.-> lab-28484{{"マッピングされた配列の差分"}} javascript/data_types -.-> lab-28484{{"マッピングされた配列の差分"}} javascript/arith_ops -.-> lab-28484{{"マッピングされた配列の差分"}} javascript/comp_ops -.-> lab-28484{{"マッピングされた配列の差分"}} javascript/higher_funcs -.-> lab-28484{{"マッピングされた配列の差分"}} javascript/destr_assign -.-> lab-28484{{"マッピングされた配列の差分"}} end

マッピングによる 2 つの配列の差を返す関数

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

この関数は 2 つの配列を受け取り、両方の配列の各要素に指定された関数を適用して、それらの差を返します。

これを行うには：

2 番目の配列 (b) の各要素に関数 (fn) を適用することで Set を作成します。
Array.prototype.map() を使って、1 番目の配列 (a) の各要素に関数 (fn) を適用します。
Set.prototype.has() を使って、1 番目の配列 (a) に対して関数 (fn) と組み合わせて Array.prototype.filter() を使い、2 番目の配列 (b) に含まれない値のみを残します。

ここに関数のコードを示します：

const differenceBy = (a, b, fn) => {
  const s = new Set(b.map(fn));
  return a.map(fn).filter((el) => !s.has(el));
};

この関数の使い方の例をいくつか示します：

differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [1]
differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], (v) => v.x); // [2]

まとめ

おめでとうございます！あなたはマッピングされた配列の差分の実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに実験を行って練習することができます。