#033
posted on 2021.04.17

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

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

 

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

 

 

prototypeまで遡って調べる

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

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

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

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

 

 

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

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

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

 

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

 

const hoge = {
	hoge01: 'hoge01',
	hoge02: function(){
		console.log('hoge02');
	  }
};

let i = 1;

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

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


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

 

 

この記事をシェア

この記事へのコメント

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

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