関数に基づく配列内の一意の値

JavaScriptJavaScriptBeginner
今すぐ練習

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

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

はじめに

この実験では、指定された比較関数に基づいて配列内のすべての一意の値を見つけるのに役立つJavaScript関数を探ります。指定された比較関数に基づいて、各値の最初の一意の出現のみを含む新しい配列を作成するために、Array.prototype.reduce()Array.prototype.some() メソッドを使用します。この実験では、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/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28335{{"関数に基づく配列内の一意の値"}} javascript/data_types -.-> lab-28335{{"関数に基づく配列内の一意の値"}} javascript/arith_ops -.-> lab-28335{{"関数に基づく配列内の一意の値"}} javascript/comp_ops -.-> lab-28335{{"関数に基づく配列内の一意の値"}} javascript/cond_stmts -.-> lab-28335{{"関数に基づく配列内の一意の値"}} javascript/obj_manip -.-> lab-28335{{"関数に基づく配列内の一意の値"}} javascript/higher_funcs -.-> lab-28335{{"関数に基づく配列内の一意の値"}} end

関数を使って配列から一意の値を見つける

配列のすべての一意の値を見つけるには、比較関数を提供します。

Array.prototype.reduce()Array.prototype.some() を使って、各値の最初の一意の出現のみを含む配列を作成します。比較関数 fn は、比較対象の2つの要素の値を2つの引数として受け取ります。

const uniqueElementsBy = (arr, fn) =>
  arr.reduce((acc, v) => {
    if (!acc.some((x) => fn(v, x))) acc.push(v);
    return acc;
  }, []);

この関数をテストするには、以下の例を使います:

uniqueElementsBy(
  [
    { id: 0, value: "a" },
    { id: 1, value: "b" },
    { id: 2, value: "c" },
    { id: 1, value: "d" },
    { id: 0, value: "e" }
  ],
  (a, b) => a.id == b.id
); // [ { id: 0, value: 'a' }, { id: 1, value: 'b' }, { id: 2, value: 'c' } ]

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

まとめ

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