JavaScript においてオブジェクト自身のプロパティを反復処理する

はじめに

この実験では、JavaScript においてオブジェクト自身のプロパティを反復処理する方法を学びます。この実験の目的は、Object.keys() と Array.prototype.forEach() メソッドを使ってオブジェクトのプロパティをループ処理し、それぞれに対してコールバック関数を実行する方法を理解することです。この実験が終わるとき、JavaScript におけるオブジェクトの扱い方とそのプロパティの操作方法をより深く理解しているでしょう。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) 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/destr_assign("Destructuring Assignment") javascript/ToolsandEnvironmentGroup -.-> javascript/debugging("Debugging") subgraph Lab Skills javascript/variables -.-> lab-28454{{"オブジェクト自身のプロパティを反復処理する"}} javascript/data_types -.-> lab-28454{{"オブジェクト自身のプロパティを反復処理する"}} javascript/arith_ops -.-> lab-28454{{"オブジェクト自身のプロパティを反復処理する"}} javascript/comp_ops -.-> lab-28454{{"オブジェクト自身のプロパティを反復処理する"}} javascript/array_methods -.-> lab-28454{{"オブジェクト自身のプロパティを反復処理する"}} javascript/destr_assign -.-> lab-28454{{"オブジェクト自身のプロパティを反復処理する"}} javascript/debugging -.-> lab-28454{{"オブジェクト自身のプロパティを反復処理する"}} end

JavaScript においてオブジェクト自身のプロパティを反復処理する方法

オブジェクト自身のプロパティを反復処理してコーディングを練習するには、次の手順に従います。

ターミナルまたは SSH を開きます。
node と入力して新しい Node.js セッションを開始します。
Object.keys() メソッドを使って、オブジェクト自身のプロパティの配列を取得します。
Array.prototype.forEach() メソッドを使って、各プロパティをループ処理し、提供された関数を実行します。
提供された関数は、3 つの引数を受け取る必要があります。プロパティ値、プロパティキー、およびオブジェクト自体です。
forOwn() 関数をオブジェクトと提供された関数とともに使って、オブジェクトのプロパティを反復処理します。

次にコードの例を示します。

const forOwn = (obj, fn) =>
  Object.keys(obj).forEach((key) => fn(obj[key], key, obj));

forOwn({ foo: "bar", a: 1 }, (v) => console.log(v)); // 'bar', 1

このコードは、foo と a のプロパティの値をコンソールに出力します。

まとめ

おめでとうございます！オブジェクト自身のプロパティを反復処理する実験を完了しました。スキルを向上させるために、LabEx でさらに実験を練習することができます。