ネストされたオブジェクトのトラバーサル | JavaScript チュートリアル

はじめに

この実験では、dig と呼ばれる関数を使って JavaScript オブジェクトのネストされた値を取得する方法を探ります。この関数は、複雑なネストされたオブジェクトから特定の値を取得するために使用でき、必要な情報にアクセスするのを容易にします。この実験を通じて、in 演算子と reduce() メソッドを使ってネストされたオブジェクトをトラバースし、ターゲット値を見つける方法を学びます。

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/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28357{{"オブジェクト内のネストされた値を取得する"}} javascript/data_types -.-> lab-28357{{"オブジェクト内のネストされた値を取得する"}} javascript/arith_ops -.-> lab-28357{{"オブジェクト内のネストされた値を取得する"}} javascript/comp_ops -.-> lab-28357{{"オブジェクト内のネストされた値を取得する"}} javascript/cond_stmts -.-> lab-28357{{"オブジェクト内のネストされた値を取得する"}} javascript/array_methods -.-> lab-28357{{"オブジェクト内のネストされた値を取得する"}} javascript/higher_funcs -.-> lab-28357{{"オブジェクト内のネストされた値を取得する"}} end

JSON オブジェクトのネストされた値を取得する方法

与えられたキーに基づいてネストされた JSON オブジェクトからターゲット値を取得するには、次の手順に従います。

ターミナル/SSH を開き、コーディングを練習するために node と入力します。
in 演算子を使用して、obj に target が存在するかどうかを確認します。
target が見つかった場合、obj の対応する値を返します。
target が見つからなかった場合、Object.values() と Array.prototype.reduce() を使用して、最初の一致するキー/値のペアが見つかるまで、各ネストされたオブジェクトに対して再帰的に dig 関数を呼び出します。

以下は、dig 関数のコードです。

const dig = (obj, target) =>
  target in obj
    ? obj[target]
    : Object.values(obj).reduce((acc, val) => {
        if (acc !== undefined) return acc;
        if (typeof val === "object") return dig(val, target);
      }, undefined);

dig 関数を使用するには、まず次のようにネストされた階層を持つ JSON オブジェクトを作成します。

const data = {
  level1: {
    level2: {
      level3: "some data"
    }
  }
};

次に、JSON オブジェクトと必要なキーを使って dig 関数を呼び出します。

dig(data, "level3"); //'some data'
dig(data, "level4"); // undefined

これらの例では、data オブジェクトの level3 キーの値が返され、存在しない level4 キーに対しては undefined が返されます。

まとめ

おめでとうございます！オブジェクト内のネストされた値を取得する実験を完了しました。技術力を向上させるために、LabExでさらに多くの実験を行って練習してください。