#033
posted on 2021.04.17 (Sat) 2022.01.27 (Thu)

JavaScriptでオブジェクトの持つ全てのプロパティーと値の調べ方。

JavaScriptで、オブジェクトがどんなプロパティーと値を持っているか調べたいことがあったのでメモ。

 

  • prototypeまで遡って参照する場合は「for-in」文を使う。
  • prototypeを参照したくない場合は「for-of」文を使う。
  • 「反復可能(iterable)なオブジェクト」ではない場合は「Object.entries()」メソッドで配列化。

 

 

prototypeまで遡って調べる

prototypeオブジェクトで実装されているプロパティーまで調べたいとき。

//調べたいオブジェクトを指定
let obj = document.getElementById('foo');
let i = 1;

//全てのプロパティーを調べる場合
for(let k in obj){
	console.log('('+i+') property > ');
	console.log(k+' : '+obj[k]);
	i++;
}

//メソッドだけを調べる場合
for(let k in obj){
	//値が関数の場合だけ取得
	if(typeof obj[k] === 'function'){
		console.log('('+i+') method > ');
		console.log(property+' : '+obj[k]);
		i++;
	}
}

 

 

prototypeのプロパティーまで参照したくない場合

プロパティー名(キー)と値の両方を調べる場合

「for-in」文はprototypeオブジェクトまで遡って参照されてしまうので、「for-of」文を使う。

※ 「for-in」文で取得して、「hasOwnProperty()」メソッドを使って分岐しても対処できる。

対象オブジェクトが反復可能オブジェクトでない(iterableではない)場合は、「Object.entries()」メソッドを使って配列化してから「for-of」文を使う。

※ 「Object.entries()」メソッドはIEに非対応。

const foo = {
	foo01: 'foo01',
	foo02: function(){
		console.log('foo02');
	  }
};

let i = 1;

//全てのプロパティーを調べる場合
for(const [k, v] of Object.entries(foo)){
	console.log('('+i+') property > ');
	console.log(k, ':', v);
	i++;
}

//メソッドだけを調べる場合
for(const [k, v] of Object.entries(foo)){
	if(typeof v === 'function'){
		console.log('('+i+') method > ');
		console.log(k, ':', v);
		i++;
	}
}


//for-in文を使う場合
for(const [k, v] in foo){
	//対象オブジェクト自身が持つプロパティー以外は除外
	if(!foo.hasOwnProperty(k)){
		continue;
	}
	if(typeof v === 'function'){
		console.log('('+i+') method > ');
		console.log(k, ':', v);
		i++;
	}
}

 

プロパティー名(キー)のみを調べる場合

「Object.keys()」メソッドを使う。

※ 指定したオブジェクトが持つ列挙可能なプロパティーのみを返す。

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

 

値のみを調べる場合

「Object.values()」メソッドを使う。(IEは非対応。)

※ 指定したオブジェクトが持つ列挙可能なプロパティーのみを返す。

console.log(Object.values(foo));

 

 

 

この記事のURL

https://memo.ag2works.tokyo/post-1502/

Copyコピー
この記事のタイトル

JavaScriptでオブジェクトの持つ全てのプロパティーと値の調べ方。 | memo メモ [AG2WORKS]

Copyコピー
この記事のリンクタグ

<a href="https://memo.ag2works.tokyo/post-1502/" target="_blank" rel="noopener">JavaScriptでオブジェクトの持つ全てのプロパティーと値の調べ方。 | memo メモ [AG2WORKS]</a>

Copyコピー
※ フィールドをクリックでコピーするテキストの編集ができます。

この記事へのコメント

コメントの書き込みはまだありません。

  • コメント内のタグはエスケープ処理され、文字列として出力されます。
  • セキュリティーのため、投稿者のIPアドレスは取得されます。
  • 管理者が内容を不適切と判断したコメントは削除されます。
  • このフォームにはスパム対策として、Googleの提供するreCAPTCHAシステムが導入されています。
    (Google Privacy Policy and Terms of Service.)