Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

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

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

phi
Game Programmer. phina.js 作ってます♪
http://phiary.me
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした