配列をオブジェクトにグループ化する | JavaScript 操作

はじめに

この実験では、JavaScript を使って配列をオブジェクトにグループ化する方法を探ります。具体的には、有効なプロパティ識別子の配列と値の配列が与えられた場合、Array.prototype.reduce() メソッドを使ってオブジェクトの値にプロパティを関連付けます。また、2 つの配列の長さが異なる場合の対処方法についても学びます。実験が終了するまでに、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/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") subgraph Lab Skills javascript/variables -.-> lab-28368{{"配列をオブジェクトにグループ化する"}} javascript/data_types -.-> lab-28368{{"配列をオブジェクトにグループ化する"}} javascript/arith_ops -.-> lab-28368{{"配列をオブジェクトにグループ化する"}} javascript/comp_ops -.-> lab-28368{{"配列をオブジェクトにグループ化する"}} javascript/array_methods -.-> lab-28368{{"配列をオブジェクトにグループ化する"}} javascript/higher_funcs -.-> lab-28368{{"配列をオブジェクトにグループ化する"}} javascript/destr_assign -.-> lab-28368{{"配列をオブジェクトにグループ化する"}} end

配列をオブジェクトにグループ化する方法

配列をオブジェクトにグループ化するには、次の手順に従います。

ターミナルまたはSSHを開き、コーディングの練習を始めるために node と入力します。
Array.prototype.reduce() メソッドを使って、2 つの配列からオブジェクトを作成します。
有効なプロパティ識別子の配列と値の配列を提供します。
プロパティ配列の長さが値配列より長い場合、残りのキーは undefined に設定されます。
値配列の長さがプロパティ配列より長い場合、残りの値は無視されます。

以下は、配列をオブジェクトにグループ化する方法を示すコードスニペットです。

const zipObject = (props, values) =>
  props.reduce((obj, prop, index) => ((obj[prop] = values[index]), obj), {});

zipObject(["a", "b", "c"], [1, 2]); // {a: 1, b: 2, c: undefined}
zipObject(["a", "b"], [1, 2, 3]); // {a: 1, b: 2}

まとめ

おめでとうございます！配列をオブジェクトにグループ化する実験を完了しました。技術力を向上させるために、LabExでさらに実験を行って練習してください。