JavaScript で配列の対称差をマスターする

はじめに

この実験では、JavaScriptを使って、与えられた関数に基づいて2つの配列の対称差を見つける方法を探ります。2つの配列の要素を比較し、各配列固有の値を返すために、Array.prototype.filter() と Array.prototype.findIndex() メソッドを使います。この実験が終わるとき、JavaScriptでこれらのメソッドを使って配列を比較および操作する方法をより深く理解しているでしょう。

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/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28333{{"関数に基づく配列の対称差"}} javascript/data_types -.-> lab-28333{{"関数に基づく配列の対称差"}} javascript/arith_ops -.-> lab-28333{{"関数に基づく配列の対称差"}} javascript/comp_ops -.-> lab-28333{{"関数に基づく配列の対称差"}} javascript/higher_funcs -.-> lab-28333{{"関数に基づく配列の対称差"}} javascript/spread_rest -.-> lab-28333{{"関数に基づく配列の対称差"}} end

配列の対称差を見つける関数

比較関数として与えられた関数を使って2つの配列の対称差を見つけるには、次の手順に従います。

ターミナル/SSHを開き、コーディングを練習するために node と入力します。
Array.prototype.filter() と Array.prototype.findIndex() メソッドを使って適切な値を見つけます。
与えられたコードを使って操作を実行します。

const symmetricDifferenceWith = (arr, val, comp) => [
  ...arr.filter((a) => val.findIndex((b) => comp(a, b)) === -1),
  ...val.filter((a) => arr.findIndex((b) => comp(a, b)) === -1)
];

たとえば、次の入力を考えてみましょう。

symmetricDifferenceWith(
  [1, 1.2, 1.5, 3, 0],
  [1.9, 3, 0, 3.9],
  (a, b) => Math.round(a) === Math.round(b)
); // [1, 1.2, 3.9]

上記のコードは、2つの配列の対称差として [1, 1.2, 3.9] を返します。

まとめ

おめでとうございます！関数に基づく配列の対称差の実験を完了しました。スキルを向上させるために、LabExでさらに実験を練習できます。