Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
150
Help us understand the problem. What is going on with this article?
@phi

[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

150
Help us understand the problem. What is going on with this article?
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
phi
Game Programmer. phina.js 作ってます♪

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
150
Help us understand the problem. What is going on with this article?