#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++;
	}
}

 

 

この記事をシェア