JavaScript でパス付きのオブジェクトを展開する | ネストされた Reduce と Split

はじめに

この実験では、JavaScript でキーにパスがあるオブジェクトを展開する方法を探ります。ネストされた Array.prototype.reduce() と String.prototype.split() メソッドを使って、ドット区切り文字で各キーを分割し、キーに対してオブジェクトを追加します。この実験が終了するとき、フラットなオブジェクトを効率的にネストされたオブジェクトに変換する方法を十分に理解しているでしょう。

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-28678{{"JavaScript のネストされたオブジェクトを展開する"}} javascript/data_types -.-> lab-28678{{"JavaScript のネストされたオブジェクトを展開する"}} javascript/arith_ops -.-> lab-28678{{"JavaScript のネストされたオブジェクトを展開する"}} javascript/comp_ops -.-> lab-28678{{"JavaScript のネストされたオブジェクトを展開する"}} javascript/array_methods -.-> lab-28678{{"JavaScript のネストされたオブジェクトを展開する"}} javascript/higher_funcs -.-> lab-28678{{"JavaScript のネストされたオブジェクトを展開する"}} javascript/destr_assign -.-> lab-28678{{"JavaScript のネストされたオブジェクトを展開する"}} end

JavaScript でオブジェクトを展開する方法

JavaScript でキーにパスがあるオブジェクトを展開するには、次の手順に従います。

ターミナル/SSH を開き、コーディングを練習するために node と入力します。
ネストされた Array.prototype.reduce() を使って、フラットなパスをリーフノードに変換します。
String.prototype.split() を使って各キーをドット区切り文字で分割し、Array.prototype.reduce() を使ってキーに対してオブジェクトを追加します。
現在のアキュムレータに既に特定のキーに対応する値が含まれている場合、その値を次のアキュムレータとして返します。
それ以外の場合、適切なキーと値のペアをアキュムレータオブジェクトに追加し、値をアキュムレータとして返します。

ここに unflattenObject 関数のコードがあります。

const unflattenObject = (obj) =>
  Object.keys(obj).reduce((res, k) => {
    k.split(".").reduce(
      (acc, e, i, keys) =>
        acc[e] ||
        (acc[e] = isNaN(Number(keys[i + 1]))
          ? keys.length - 1 === i
            ? obj[k]
            : {}
          : []),
      res
    );
    return res;
  }, {});

JavaScript でオブジェクトを展開するために unflattenObject 関数を使用できます。

unflattenObject({ "a.b.c": 1, d: 1 }); // { a: { b: { c: 1 } }, d: 1 }
unflattenObject({ "a.b": 1, "a.c": 2, d: 3 }); // { a: { b: 1, c: 2 }, d: 3 }
unflattenObject({ "a.b.0": 8, d: 3 }); // { a: { b: [ 8 ] }, d: 3 }

まとめ

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