LoginSignup
151

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-06-11

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

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

js-logo.png

フロー

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

  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.prototypeforIn を定義しちゃいます.

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
151