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));

• JavaScriptで配列やオブジェクトをループする良い方法を真剣に検討してみた
• for-inの仕様も見てみたよ。使う機会なさそうだけど。（配列とかおれおれAdvent Calendar2018 – 14日目）
• for-ofで配列も普通のオブジェクトも反復しよう。（配列とかおれおれAdvent Calendar2018 – 15日目）
• Object.keys, values, entries