再帰を使った JavaScript オブジェクトのフラット化

Beginner

This tutorial is from open-source community. Access the source code

はじめに

この実験では、キーのパス付きでオブジェクトをフラット化する JavaScript 関数を調べます。この関数は再帰と Object.keys()Array.prototype.reduce() と組み合わせて、すべてのリーフノードをフラット化されたパスノードに変換します。この実験が終了するまでに、JavaScript オブジェクトを操作して、データ処理を簡単にするためにフラット化する方法をより深く理解するようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

オブジェクトのフラット化

キーのパス付きでオブジェクトをフラット化するには、次の手順に従います。

  1. ターミナル/SSH を開き、コーディングの練習を始めるために node と入力します。
  2. 再帰を使ってオブジェクトをフラット化します。
  3. Object.keys()Array.prototype.reduce() と組み合わせて、すべてのリーフノードをフラット化されたパスノードに変換します。
  4. キーの値がオブジェクトの場合、Object.assign() を使ってパスを作成するために適切な prefix で関数を再帰的に呼び出します。
  5. それ以外の場合、適切な接頭辞付きのキーバリューペアをアキュムレータオブジェクトに追加します。
  6. すべてのキーに接頭辞を付けたい場合を除き、2 番目の引数 prefix を省略します。

以下はサンプルの実装です。

const flattenObject = (obj, prefix = "") =>
  Object.keys(obj).reduce((acc, k) => {
    const pre = prefix.length ? `${prefix}.` : "";
    if (
      typeof obj[k] === "object" &&
      obj[k] !== null &&
      Object.keys(obj[k]).length > 0
    ) {
      Object.assign(acc, flattenObject(obj[k], pre + k));
    } else {
      acc[pre + k] = obj[k];
    }
    return acc;
  }, {});

この flattenObject 関数を次のように使うことができます。

flattenObject({ a: { b: { c: 1 } }, d: 1 }); // { 'a.b.c': 1, d: 1 }

まとめ

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