JavaScript オブジェクトのマージ | プログラミングチュートリアル

はじめに

この実験では、JavaScript でオブジェクトをマージするプロセスを探求します。この実験では、2 つ以上のオブジェクトを結合して新しいオブジェクトを作成する手順を案内します。オブジェクトとキーを反復処理するために Array.prototype.reduce() と Object.keys() をどのように使用するか、および既存のキーの値をマージするために Object.prototype.hasOwnProperty() と Array.prototype.concat() をどのように使用するかを学びます。

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") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28495{{"Reduce と Concat を使った JavaScript オブジェクトのマージ"}} javascript/data_types -.-> lab-28495{{"Reduce と Concat を使った JavaScript オブジェクトのマージ"}} javascript/arith_ops -.-> lab-28495{{"Reduce と Concat を使った JavaScript オブジェクトのマージ"}} javascript/comp_ops -.-> lab-28495{{"Reduce と Concat を使った JavaScript オブジェクトのマージ"}} javascript/array_methods -.-> lab-28495{{"Reduce と Concat を使った JavaScript オブジェクトのマージ"}} javascript/higher_funcs -.-> lab-28495{{"Reduce と Concat を使った JavaScript オブジェクトのマージ"}} javascript/destr_assign -.-> lab-28495{{"Reduce と Concat を使った JavaScript オブジェクトのマージ"}} javascript/spread_rest -.-> lab-28495{{"Reduce と Concat を使った JavaScript オブジェクトのマージ"}} end

オブジェクトマージ関数

2 つ以上のオブジェクトをマージするには、次の手順に従います。

ターミナル/SSH を開き、コーディングを開始するために node と入力します。
Array.prototype.reduce() と Object.keys() を組み合わせて、すべてのオブジェクトとキーを反復処理します。
Object.prototype.hasOwnProperty() と Array.prototype.concat() を使用して、複数のオブジェクトに存在するキーの値を追加します。
2 つ以上のオブジェクトの組み合わせから新しいオブジェクトを作成するために、次のコードスニペットを使用します。

const merge = (...objs) =>
  [...objs].reduce(
    (acc, obj) =>
      Object.keys(obj).reduce((a, k) => {
        acc[k] = acc.hasOwnProperty(k)
          ? [].concat(acc[k]).concat(obj[k])
          : obj[k];
        return acc;
      }, {}),
    {}
  );

たとえば、次のオブジェクトを考えてみましょう。

const object = {
  a: [{ x: 2 }, { y: 4 }],
  b: 1
};
const other = {
  a: { z: 3 },
  b: [2, 3],
  c: "foo"
};

これら 2 つのオブジェクトを merge() 関数を使用してマージすると、次の結果が得られます。

merge(object, other);
// { a: [ { x: 2 }, { y: 4 }, { z: 3 } ], b: [ 1, 2, 3 ], c: 'foo' }

まとめ

おめでとうございます！あなたはオブジェクトをマージする実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。