ひよっこPGのブログ

主に、技術メモや英語たまにギター関連のことも書いているブログです。

JavaScriptで、オブジェクトのキーを配列にしたい場合

JavaScriptで、オブジェクトのキーを配列として持ちたい場合に、書く処理について書きます。

説明する前の前置き

色を表すオブジェクトをcolor その中に 各色のオブジェクト情報が入っているとします。

var color = {
	red : {
		rgb : "255,0,0"
		その他,色に関する情報....
	},
	green : {
		rgb : "0,255,0"
	},
	blue : {
		rgb : "0,0,255"
	}
}

これから

var colorKeyArray = 何らかの処理を実行。
//=> ["red", "green", "blue"];

のように、やりたかったとします。



やり方①

まずいちばん最初に自分が思いついたのは

var colorKeyArray = (function(){
    var array = [];
    for ( var key in color ){
        array.push(key);
    }
    return array;
})();

for inループで回して、配列に一個ずつ代入して 返す。

追記 2014.05.07(木)
一つ見直してて、追記した方がいいなと思ったことがあります。
今回の場合は、prototypeを使っていないので大丈夫ですが
仮に、ほぼ全てのオブジェクトが継承している Object.prototypeへ プロパティを追加したとすると
そのプロパティまで、配列に代入されることになります。

Object.prototype.hoge = "hoge";
var colorKeyArray = (function(){
    var array = [];
    for ( var key in color ){
        array.push(key);
    }
    return array;
})();
//=> ["red", "green", "blue", "hoge"]
//余計なhogeが代入されている

上記のようにならないよう、colorオブジェクト自身が持つプロパティであることをチェックする
hasOwnPropertyメソッドを使います。
Object.prototype.hasOwnProperty - JavaScript | MDN

Object.prototype.hoge = "hoge";
var colorKeyArray = (function(){
    var array = [];
    for ( var key in color ){
        if( color.hasOwnProperty() ){
            array.push(key);
        }
    }
    return array;
})();
//=> ["red", "green", "blue"]

やり方②

Underscore.jsを少しかじっていたので、一個ずつ代入して累積していくような処理なら
_.reduceメソッドがあるから _.reduceメソッドで書いてみようと思って書いたのが

var colorKeyArray = _.reduce(color, function(sumArray, value, key){
    sumArray.push(key);
    return sumArray;
}, []);

_.reduceについて、記事に書いたことがあるのでよかったら参考にどうぞ^ー^
UnderScore.js の _.reduceメソッドに焦点をあてて勉強してみる - ひよっこPGのブログ

やり方③

Underscore.jsについて、もう少し調べると こういうプロパティ名の配列を取得するメソッドが用意されてました・・・・。

var colorKeyArray = _.keys(color);

最初から、これを使っておけばよかった!
今までは、やり方①でやってたので
こういう便利メソッドをガンガン使っていかないとなと思いました。

伝えたかったこと

オブジェクト内のプロパティ名配列を取得したい場合
UnderScore.jsでは _.keys(オブジェクト)を使うと一発で取得可能。




追記2 2014.05.07(木)

コメントで教えていただいたのですが、
UnderScore.jsを使わなくても、ネイティブでObjectに keysというメソッドがあるみたいで

var colorKeyArray = Object.keys(color);

上記のようにも出来ることを確認しました。
教えていただきありがとうございました!!!
本当に感謝ですm(__)m
keys - JavaScript | MDN

このネイティブメソッドをサポートしていない場合は、UnderScore.jsの_.keysを使ってもいいかもしれません^ー^
UnderScore.jsの_.keysを追ってみると、Object.keysをサポートしていればそれを使い
サポートしていなければ、独自に定義した関数を使ってるみたいですからねー。