JavaScript でオブジェクトプロパティを一覧表示する

1. JavaScript の for...in ループを使用してオブジェクトのプロパティを一覧表示する
2. JavaScript で Object.keys() 関数を使用してオブジェクトのプロパティを一覧表示する
3. JavaScript で Object.getOwnPropertyNames() を使用してオブジェクトのプロパティを一覧表示する

JavaScript は、オブジェクト値を操作するための Object.values() や Object.prototype.valueOf()、Object.keys() や Object.prototype.hasOwnProperty() などのオブジェクトを操作するためのさまざまなメソッドを提供します。オブジェクトキーを操作します。

ユーザーは、オブジェクトのキーとプロパティに対して任意のアクションを実行できます。このチュートリアルでは、JavaScript の for...in ループ、Object.getOwnPropertyNames()、および Object.keys() 関数を使用したオブジェクトプロパティの一覧表示について説明します。

JavaScript の for...in ループを使用してオブジェクトのプロパティを一覧表示する

オブジェクトのプロパティを一覧表示するには、JavaScript の for...in ループを使用できます。for...in ループは、オブジェクトの列挙可能なプロパティを繰り返し処理します。

これらは、enumerable フラグが true に設定されているオブジェクトのプロパティです。これには、継承された列挙可能なプロパティが含まれます。ただし、このループは、enumerable フラグが false に設定されている列挙不可能なプロパティを無視します。

たとえば、3つのプロパティを持つオブジェクトを作成し、for...in ループを使用してリストします。以下のコードを参照してください。

構文：

for (variable in object) {
  statement
}

この関数は object を反復し、variable には反復ごとに異なるプロパティ名が割り当てられます。このメソッドは、object から列挙可能なプロパティのみを抽出します。

詳細については、for...in メソッドの詳細を参照してください。

const inputObject = {
  id: 42,
  name: 'John Doe',
  address: {city: 'Mumbai', country: 'India'}
};
for (const property in inputObject) {
  console.log(property);
}

上記のサンプルコードブ​​ロックでは、オブジェクト id、name、および address の 3つのプロパティを定義しました。inputObject を繰り返すと、inputObject のすべてのプロパティがチェックされます。

上記のコードブロックの出力は、以下のようになります。

出力：

id
name
address

JavaScript で Object.keys() 関数を使用してオブジェクトのプロパティを一覧表示する

これは、オブジェクトのプロパティまたはキーを抽出するために使用される JavaScript によって提供される組み込みメソッドです。オブジェクトを繰り返し、列挙可能なプロパティの配列を返します。

列挙不可能なプロパティは、それぞれのオブジェクトがループ内で Object.keys() または for ...in とともに渡されたときにループに表示されないオブジェクトのプロパティです。

構文：

Object.keys(object);

この関数は object を入力として受け取り、必須のパラメーターです。このメソッドは、object から列挙可能なプロパティのみを抽出します。

詳細については、keys メソッドの詳細を参照してください。

const inputObject = {
  id: 42,
  name: 'John Doe',
  address: {city: 'Mumbai', country: 'India'}
};

Object.defineProperty(
    inputObject, 'salary', {value: '30,000$', enumerable: false})

console.log(Object.keys(inputObject));

前の例では、オブジェクト ID、name、および address の 3つのプロパティを定義しました。inputObject を渡すと、inputObject のすべてのプロパティがチェックされます。

上記のコードブロックの出力は、以下のようになります。

出力：

["id", "name", "address"]

JavaScript で Object.getOwnPropertyNames() を使用してオブジェクトのプロパティを一覧表示する

これは、オブジェクトのプロパティまたはキーを抽出するために使用される JavaScript によって提供される組み込みメソッドです。オブジェクトを繰り返し、列挙不可能なプロパティを含むプロパティの配列を返します。

構文：

Object.getOwnPropertyNames(object);

この関数は、必須パラメーターobject を入力として受け取ります。このメソッドは、値ではなく、object の列挙可能なプロパティと列挙不可能なプロパティのみを抽出します。

詳細については、getOwnPropertyNames メソッドの詳細を参照してください。

getOwnPropertyNames() と Object.keys() の主な違いは、getOwnPropertyName() が列挙可能なプロパティと列挙不可能なプロパティの両方を返すことです。一方、Object.keys() は列挙可能なキーのみを返します。

列挙できないプロパティは、Object.defineProperty を使用して作成できます。プロパティ初期化子がプロパティを初期化するときに、enumerable フラグが true に設定されます。

propertyIsEnumerable() メソッドを使用して、オブジェクトに列挙可能なプロパティまたは列挙不可能なプロパティが含まれているかどうかを確認できます。

const inputObject = {
  id: 42,
  name: 'John Doe',
  address: {city: 'Mumbai', country: 'India'}
};

Object.defineProperty(
    inputObject, 'salary', {value: '30,000$', enumerable: false})

console.log(Object.getOwnPropertyNames(inputObject));

前の例では、オブジェクト ID、name、および address の 3つのプロパティを定義しました。inputObject を渡すと、inputObject のすべてのプロパティと列挙不可能なプロパティがチェックされます。

上記のコードブロックの出力は、以下のようになります。

出力：

["id", "name", "address", "salary"]