一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

JavaScriptでオブジェクトのプロパティを列挙する方法

今回はJavaScriptでオブジェクトのプロパティを列挙する方法について書きたいと思います。


オブジェクトのプロパティを列挙する方法って地味に結構あるんですよね。

ただ、それぞれの手法に特徴(ていうか制限?)があって、例えば「プロトタイプがもっているものは列挙しない」とか「列挙可能なプロパティのみ」とか。。


てなわけで今回はプロパティを列挙する方法を3つ紹介したいと思います。
ちなみに今回は列挙できるできないとかの話だけなので「これはプロパティじゃなくてメソッドだろーが!」的な部分は大目に見てください。。


1, for-in文を使う

まずは一番よく見るやつですね。サンプルコードを書いてみました。

var animal = {
        name: "あにまる",
        breathe: function(){
            console.log("ふーふー");
        }
    }

var cat = Object.create(animal); 
cat.name = "ねこ";
cat.cry = function(){
	console.log("ニャーニャー");
};

//catのプロトタイプはちゃんとanimalになっている
Object.getPrototypeOf(cat); //Object {name: "あにまる", breathe: function} 


//animalがもつプロパティを調べる
for(var prop in animal){
    console.log(prop); //name, breathe
}

//catがもつプロパティを調べる
for(var prop in cat){
    console.log(prop); //name, breathe, cry
}

こんな感じでfor-in文はそのオブジェクトのプロトタイプチェーンをたどって列挙可能なすべてのプロパティを列挙してくれます。


逆にいうと、自分自身がもつプロパティのみを調べるときはいちいちhasOwnProperty()とかを使って

for(var prop in cat){
    if(cat.hasOwnProperty(prop)){
        console.log(prop); //name, cry
    }
}

みたいな感じにしないといけないですね。


2, Object.keys()を使う

こちらは1とは異なり、プロトタイプチェーンをたどらないでそのオブジェクト自身のプロパティのみを列挙してくれます。

Object.keys(cat); //["name", "cry"]

しかも配列に格納して返してくれるおまけつき!!いいですね。
1の時のようにhasOwnProperty()とかしないでいいので便利です。


ただし、1、2の方法どちらの方法でもカバーできないものがあります。
それは組み込みオブジェクトのプロパティ(または意図的に列挙不可とされたオブジェクトのプロパティ)は列挙できないということです。

Object.keys(Array); //[] なにも列挙できない


これを解決できる方法が3になります。


3, Object.getOwnPropertyNames()を使う

Object.getOwnPropertyNames(cat); //["name", "cry"]

Object.getOwnPropertyNames(Array); //["length", "name", "arguments", "caller", "prototype", "isArray"]

Object.getOwnPropertyNames(Array.prototype);  //["length", "constructor", "toString", "toLocaleString", "join", "pop", ....]

こんな感じで列挙不可とされているプロパティも含めて調べることができます。こちらもObject.keysと同様、プロトタイプがもつプロパティは無視です。

これは組み込みオブジェクトがもつプロパティやメソッドを調べるときにめっちゃ便利ですね。


以上、オブジェクトのプロパティを列挙する方法を3つ紹介しました。

書いている途中で参考記事を探してたら、ちょうど同じことをよりクオリティ高く書いている方がいらっしゃったので、こちらも参考にすればより理解が深まると思います↓

http://vividcode.hatenablog.com/entry/js/property-names


それでは今回はこのへんで。


小さなことからコツコツと。