パス文字列でネストされたオブジェクトのプロパティを取得する

はじめに

この実験では、JavaScript で与えられたパス文字列を使用してネストされたオブジェクトのプロパティを取得する方法を探ります。map()、filter()、reduce() などのさまざまな配列メソッドを使用して、複雑なオブジェクトから特定の値を抽出する方法を学びます。このスキルは、大規模なデータセットやネストされた JSON オブジェクトを返す API を扱う際に不可欠です。

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/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28356{{"パス文字列からネストされたオブジェクトのプロパティを取得する"}} javascript/data_types -.-> lab-28356{{"パス文字列からネストされたオブジェクトのプロパティを取得する"}} javascript/arith_ops -.-> lab-28356{{"パス文字列からネストされたオブジェクトのプロパティを取得する"}} javascript/comp_ops -.-> lab-28356{{"パス文字列からネストされたオブジェクトのプロパティを取得する"}} javascript/array_methods -.-> lab-28356{{"パス文字列からネストされたオブジェクトのプロパティを取得する"}} javascript/higher_funcs -.-> lab-28356{{"パス文字列からネストされたオブジェクトのプロパティを取得する"}} javascript/spread_rest -.-> lab-28356{{"パス文字列からネストされたオブジェクトのプロパティを取得する"}} end

パス文字列からネストされたオブジェクトのプロパティを取得する方法

コーディングの練習をするには、ターミナル/SSH を開き、node と入力します。

次の関数は、パス文字列で指定されたセレクタを使用して、オブジェクトから一連のプロパティを取得します。これを実現するには、次の手順に従います。

Array.prototype.map() を使用して各セレクタを反復処理し、String.prototype.replace() を適用して角括弧をドットに置き換えます。
String.prototype.split() を使用して各セレクタを文字列の配列に分割します。
Array.prototype.filter() を使用して空の値を削除します。
Array.prototype.reduce() を使用して各セレクタで示される値を取得します。

これが関数です。

const get = (from, ...selectors) =>
  [...selectors].map((s) =>
    s
      .replace(/\[([^\[\]]*)\]/g, ".$1.")
      .split(".")
      .filter((t) => t !== "")
      .reduce((prev, cur) => prev && prev[cur], from)
  );

この関数を使用して、パス文字列でネストされたオブジェクトから値を取得することができます。次に例を示します。

const obj = {
  selector: { to: { val: "val to select" } },
  target: [1, 2, { a: "test" }]
};
get(obj, "selector.to.val", "target[0]", "target[2].a");
// ['val to select', 1, 'test']

まとめ

おめでとうございます！「パス文字列からネストされたオブジェクトのプロパティを取得する」実験を完了しました。LabEx でさらに多くの実験を行い、スキルを向上させることができます。