オブジェクトのキーを再帰的にマッピングする

JavaScriptJavaScriptBeginner
今すぐ練習

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

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、JavaScript の deepMapKeys 関数を使ってオブジェクトのキーを再帰的にマッピングする方法を探ります。各キーに対して提供された関数を使って、同じ値とマッピングされたキーを持つ新しいオブジェクトを作成する方法を学びます。実践的な演習と例を通じて、この関数がどのように機能するか、また実際のシナリオでどのように使えるかを理解します。


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") subgraph Lab Skills javascript/variables -.-> lab-28265{{"オブジェクトのキーを再帰的にマッピングする"}} javascript/data_types -.-> lab-28265{{"オブジェクトのキーを再帰的にマッピングする"}} javascript/arith_ops -.-> lab-28265{{"オブジェクトのキーを再帰的にマッピングする"}} javascript/comp_ops -.-> lab-28265{{"オブジェクトのキーを再帰的にマッピングする"}} javascript/array_methods -.-> lab-28265{{"オブジェクトのキーを再帰的にマッピングする"}} javascript/higher_funcs -.-> lab-28265{{"オブジェクトのキーを再帰的にマッピングする"}} end

オブジェクトのキーを再帰的にマッピングする

オブジェクトのキーを再帰的にマッピングするには、次の手順に従います。

  1. ターミナル/SSH を開き、コーディングを練習するために node と入力します。
  2. 提供されたオブジェクトと新しいキーを生成する関数を使って deepMapKeys 関数を使用します。
  3. この関数は、提供されたオブジェクトと同じ値を持ち、各キーに対して提供された関数を実行することで生成されたキーを持つオブジェクトを作成します。
  4. Object.keys() を使ってオブジェクトのキーを反復処理します。
  5. Array.prototype.reduce() と提供された関数を使って、同じ値とマッピングされたキーを持つ新しいオブジェクトを作成します。
  6. 値がオブジェクトの場合、そのキーもマッピングするために再帰的に deepMapKeys を呼び出します。
const deepMapKeys = (obj, fn) =>
  Array.isArray(obj)
    ? obj.map((val) => deepMapKeys(val, fn))
    : typeof obj === "object"
      ? Object.keys(obj).reduce((acc, current) => {
          const key = fn(current);
          const val = obj[current];
          acc[key] =
            val !== null && typeof val === "object"
              ? deepMapKeys(val, fn)
              : val;
          return acc;
        }, {})
      : obj;

以下は、deepMapKeys の使用例です。

const obj = {
  foo: "1",
  nested: {
    child: {
      withArray: [
        {
          grandChild: ["hello"]
        }
      ]
    }
  }
};

const upperKeysObj = deepMapKeys(obj, (key) => key.toUpperCase());
/*
{
  "FOO":"1",
  "NESTED":{
    "CHILD":{
      "WITHARRAY":[
        {
          "GRANDCHILD":[ 'hello' ]
        }
      ]
    }
  }
}
*/

まとめ

おめでとうございます!オブジェクトのキーを再帰的にマッピングする実験を終えました。技術力を向上させるために、LabExでさらに実験を練習してください。