[JavaScript] オブジェクトをループでまわす

「そもそもオブジェクトをループで回したい場面なんてねぇよ！」
「潔く標準のメソッド使えよ！」といったツッコミを想定の上で書いております.

ご承知の上でお読みください.

フロー

ふとオブジェクトをループで回したいってときに私がたどるフロー

1. for in 使うか?
2. いや keys で key 配列とってきて forEach で回したほうがカッコよくね？
3. obj.keys().forEach(...) ... あれ? エラー??
4. keys って Object の static メソッドかよ!!
5. Object.keys(obj).forEach(...)

これを今回は↓

1. forIn(...) 使お♪

で済ませちゃおうって tips です.

よくやっちゃうダサいパターン

for in でまわす.
hasOwnProperty() 忘れがち.

var human = {
    name: "phi",
    age: 25,
    bloodType: 'O',
};

for (var key in human) {
    if (human.hasOwnProperty(key)) {
        var value = human[key];
        console.log(key, ':', value);
    }
}

モダンだけど使い方間違いがちなやつ

keys() 使えば hasOwnProperty() でチェックする必要ない.
けど, human.keys() じゃなくて Object.keys(human) ってのがなんとも...

var human = {
    name: "phi",
    age: 25,
    bloodType: 'O',
};

Object.keys(human).forEach(function(key) {
    var value = this[key];
    console.log([key, ':', value].join(' '));
}, human);

forIn 定義してオレオレコーディング

js の最大のメリット(デメリット?) である prototype の拡張!
Object.prototype に forIn を定義しちゃいます.

Object.defineProperty(Object.prototype, "forIn", {
    value: function(fn, self) {
        self = self || this;

        Object.keys(this).forEach(function(key, index) {
            var value = this[key];

            fn.call(self, key, value, index);
        }, this);
    }
});

これでさっきのコードがこうなります.

human.forIn(function(key, value, index) {
    console.log([index, key, value].join(','));
});

使うのかわかんないけど index も取れちゃいます♪

サンプル

実際の動作はこちらで見れます!

ちなみに最新の tmlib.js でも同じようなメソッドが定義されているので
読み込むだけで obj.$forIn() って感じで同じようなことがやれます.
っというステマでしたmm

他にもこんなのあるよーとかあれば教えて下さい:D