web-dev-qa-db-ja.com

オブジェクトのプロパティを繰り返す

var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    console.log(propt + ': ' + obj[propt]);
}

変数proptはオブジェクトのプロパティをどのように表しますか？組み込みのメソッドやプロパティではありません。なぜそれがオブジェクト内のすべてのプロパティを思い付くのでしょうか。

javascriptloopsobject
1755
Rafay

プロパティを繰り返すには、この追加のhasOwnPropertyチェックが必要です。

for (var property in object) {
    if (object.hasOwnProperty(property)) {
        // do stuff
    }
}

オブジェクトのプロトタイプには、技術的にはオブジェクトの一部であるオブジェクトの追加のプロパティが含まれているので必要です。これらの追加のプロパティは基本オブジェクトクラスから継承されますが、それでもobjectのプロパティです。

hasOwnProperty は、これがこのクラスに固有のプロパティであり、基本クラスから継承されたものではないかどうかを確認するだけです。

2257
Dominik

JavaScript 1.8.5以降では、Object.keys(obj)を使用して、オブジェクト自体に定義されたプロパティの配列（obj.hasOwnProperty(key)に対してtrueを返すもの）を取得できます。

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

これはfor-inループを使うよりも優れています（そして読みやすくなります）。

これらのブラウザでサポートされています。

  • Firefox（Gecko）：4（2.0）
  • クローム：5
  • インターネットエクスプローラ：9

さらなる情報については Mozilla Developer Network Object.keys（） のリファレンス を参照してください。

984
Danny R

私たちは2017年にいる女の子とみんな私たちはタイピングのための多くの時間を持っていません...それでは、このクールな新しい空想ECMAScript 2016をやろう：

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));
223
Frank Roth

それはfor...in statement（ _ mdn _ 、 ECMAScript spec ）です。

「FORすべてのプロパティINobjオブジェクト」と読み替えて、各プロパティをPROPT変数に順番に代入してください。

200
Marc B

今後のバージョンのESでは、 Object.entries を使用できます。

for (const [key, value] of Object.entries(obj)) { }

または

Object.entries(obj).forEach(([key, value]) => ...)

値を繰り返し処理するだけの場合は、Object.valuesを使用します。

for (const value of Object.values(obj)) { }

または

Object.values(obj).forEach(value => ...)
84
user663031

それは単なるfor...inループです。 Mozillaのドキュメントをチェックしてください 。

36
Matt Ball

jqueryを使用すると、今すぐこれを実行できます。

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});
21
Rob Sedgwick

Dominik's answerは完璧です。読みやすいように、こうすることをお勧めします。

for (var property in object) {
    if (!object.hasOwnProperty(property)) continue;

    // Do stuff...
}
20
Cyril N.

あなたの環境が ES2017 をサポートしている場合は、 Object.entries をお勧めします。

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`);
});

Mozillas Object.entries（） documentationにあるとおり：

Object.entries（） メソッドは、for ... inループによって提供されるのと同じ順序で、指定されたオブジェクト自身の列挙可能なproperty [key、value]ペアの配列を返します（違いはfor-inループはプロトタイプチェーン内のプロパティも列挙します。

基本的にObject.entriesを使うと、古い for ... in ループで必要とされる以下の追加のステップをやめることができます。

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}
18
JSON C11

上記の答えは、オブジェクトであることを確認した後にforループ内で何をしているのかを説明していないため、少し面倒です。あなたは直接アクセスしないでください。あなたは実際にあなたがOBJに適用する必要があるというキーだけを届けられます：

var obj = {
  a: "foo",
  b: "bar",
  c: "foobar"
};

// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
  // We check if this key exists in the obj
  if (obj.hasOwnProperty(someKey))
  {
    // someKey is only the KEY (string)! Use it to get the obj:
    var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn't literally named "someKey"

    // NOW you can treat it like an obj
    var shouldBeBar = myActualPropFromObj.b;
  }
}

これはすべてECMA5安全です。 Rhinoのような不完全なJSバージョンでさえ動作します。

18
dylanh724

ES2015のReflect.ownKeys(obj)の使用法を追加し、イテレータを介してプロパティを反復処理する。

例えば：

let obj = { a: 'Carrot', b: 'Potato', Car: { doors: 4 } };

によって反復することができます

// logs each key
Reflect.ownKeys(obj).forEach(key => console.log(key));

オブジェクトのキーの値を直接反復したい場合は、文字列、配列、型付き配列、MapおよびSetに対するJavaSciptsのデフォルトの反復子と同じように、iteratorを定義できます。

JSはSymbol.iteratorとして定義されなければならないデフォルトのiteratorプロパティを通して繰り返しを試みます。

すべてのオブジェクトを反復処理できるようにしたい場合は、それをObjectのプロトタイプとして追加できます。

Object.prototype[Symbol.iterator] = function*() { 
    for(p of Reflect.ownKeys(this)){ yield this[p]; }
}

これにより、for ... ofループを使用してオブジェクトの値を反復処理できます。次に例を示します。

for(val of obj) { console.log('Value is:' + val ) }

注意 ：この回答を書いている時点（2018年6月）、IE以外の他のすべてのブラウザはfor...ofを介したジェネレータとSymbol.iteratorの繰り返しをサポートしています。

13
Dimitar Nikovski
let obj = {"a": 3, "b": 2, "6": "a"}

Object.keys(obj).map((item) => {console.log("item", obj[item])})

// a
// 3
// 2
11
Philll_t

For ... inループは、forループのようなものであるため、オブジェクト内の各プロパティを表します。次のようにして、for ...ループでproptを定義しました。

    for(var propt in obj){
alert(propt + ': ' + obj[propt]);
}

For ... inループは、オブジェクトの列挙可能なプロパティを繰り返し処理します。定義した変数、またはfor ... inループに入れた変数は、次のプロパティに進むたびに変わります。 for ... inループ内の変数はキーを反復処理しますが、その値はキーの値です。例えば：

    for(var propt in obj) {
      console.log(propt);//logs name
      console.log(obj[propt]);//logs "Simon"
    }

変数が変数の値とどう違うのかを見ることができます。対照的に、for ... ofループは反対のことを行います。

これが役に立つことを願っています。

11
Vappor Washmade

Lodashを使うことができます。 ドキュメンテーション

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    ...
});
10
viktarpunko
Object.keys(obj).forEach(key =>
  console.log(`key=${key} value=${obj[key]}`)
);
9
Fellow Stranger

今日では、Symbol.iteratorメソッドを追加するだけで、標準のJSオブジェクトを反復可能なオブジェクトに変換できます。その後、for ofループを使用してその値を直接受け入れることも、オブジェクトに対して拡散演算子を使用することもできます。クール。それをどうやって実現できるか見てみましょう。

var o = {a:1,b:2,c:3},
    a = [];
o[Symbol.iterator] = function*(){
                       var ok = Object.keys(this);
                            i = 0;
                       while (i < ok.length) yield this[ok[i++]];
                     };
for (var value of o) console.log(value);
// or you can even do like
a = [...o];
console.log(a);
8
Redu

forループは、オブジェクトobjのすべてのプロパティに対して繰り返し処理を行っています。 proptはforループの最初の行に定義されています。これはobjオブジェクトのプロパティの名前である文字列です。ループの最初の反復では、proptは "name"になります。

8
arb

JavaScriptのオブジェクトはプロパティの集まりであるため、forステートメントごとにループできます。

あなたはobjをキーバリューコレクションと考えるべきです。

8
user920041

再帰的な方法も追加します。

function iterate(obj) {
    // watch for objects we've already iterated so we won't end in endless cycle
    // for cases like var foo = {}; foo.bar = foo; iterate(foo);
    var walked = [];
    var stack = [{obj: obj, stack: ''}];
    while(stack.length > 0)
    {
        var item = stack.pop();
        var obj = item.obj;
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object") {
                  // check if we haven't iterated through the reference yet
                  var alreadyFound = false;
                  for(var i = 0; i < walked.length; i++)
                  {
                    if (walked[i] === obj[property])
                    {
                      alreadyFound = true;
                      break;
                    }
                  }
                  // new object reference
                  if (!alreadyFound)
                  {
                    walked.Push(obj[property]);
                    stack.Push({obj: obj[property], stack: item.stack + '.' + property});
                  }
                }
                else
                {
                    console.log(item.stack + '.' + property + "=" + obj[property]);
                }
            }
        }
    }
}

使用法：

iterate({ foo: "foo", bar: { foo: "foo"} });
4
Ondrej Svejdar

実行している場合 ノード 私はお勧めします：

Object.keys(obj).forEach((key, index) => {
    console.log(key);
});
4
Justin

あなたは基本的にオブジェクトの各プロパティをループしたいと思います。

JSFiddle

var Dictionary = {
  If: {
    you: {
      can: '',
      make: ''
    },
    sense: ''
  },
  of: {
    the: {
      sentence: {
        it: '',
        worked: ''
      }
    }
  }
};

function Iterate(obj) {
  for (prop in obj) {
    if (obj.hasOwnProperty(prop) && isNaN(prop)) {
      console.log(prop + ': ' + obj[prop]);
      Iterate(obj[prop]);
    }
  }
}
Iterate(Dictionary);
3
HovyTech

ここでは、各ノードを繰り返して意味のあるノード名を作成しています。お気づきのとおり、instanceOf ArrayとinstanceOf Objectはほとんど同じことをします（私のアプリケーションでは、別のロジックを使用しています）。

function iterate(obj,parent_node) {
    parent_node = parent_node || '';
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            var node = parent_node + "/" + property;
            if(obj[property] instanceof Array) {
                //console.log('array: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            } else if(obj[property] instanceof Object){
                //console.log('Object: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            }
            else {
                console.log(node + ":" + obj[property]);
            }
        }
    }
}

注 - 私はOndrej Svejdarの答えに触発されました。しかし、このソリューションはパフォーマンスが良く、曖昧さが少なくなります。

2
Faiz Mohamed Haneef

あなたはJavascriptとは異なる意図を持っているかもしれないので、私は上記の答えに加えたいと思います。 JSONオブジェクトとJavascriptオブジェクトは別物です。上で提案した解決策を使用してJSONオブジェクトのプロパティを反復処理した後で驚かれるかもしれません。

次のようなJSONオブジェクトがあるとします。

var example = {
    "prop1": "value1",
    "prop2": [ "value2_0", value2_1"],
    "prop3": {
         "prop3_1": "value3_1"
    }
}

その「プロパティ」を反復処理する間違った方法： 

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        recursivelyIterateProperties(jsonObject[prop]);
    }
}

0と1およびprop1のプロパティを反復処理するときに、コンソールがprop2、prop3_1などをロギングしているのを見て驚くかもしれません。それらのオブジェクトはシーケンスであり、シーケンスのインデックスはJavascriptにおけるそのオブジェクトのプロパティです。

JSONオブジェクトのプロパティを再帰的に繰り返すためのより良い方法 は、まずそのオブジェクトがシーケンスかどうかをチェックすることです。

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        if (!(typeof(jsonObject[prop]) === 'string')
            && !(jsonObject[prop] instanceof Array)) {
                recursivelyIterateProperties(jsonObject[prop]);

            }

     }
}
2
Jadiel de Armas

For..inループが行うことは、新しい変数（var someVariable）を作成してから、指定されたオブジェクトの各プロパティをこの新しい変数（someVariable）に1つずつ格納することです。したがって、ブロック{}を使用すれば、反復することができます。次の例を考えてください。

var obj = {
     name:'raman',
     hobby:'coding',
     planet:'earth'
     };

for(var someVariable in obj) {
  //do nothing..
}

console.log(someVariable); // outputs planet
2
Raman Sohi

最高評価の答えは正しいですが、これは別の使用例です。つまり、オブジェクトを反復処理していて、最後に配列を作成したい場合です。 forEachの代わりに.mapを使用する

const newObj = Object.keys(obj).map(el => {
 //What ever you want to do
})
1
iRohitBhatia

受け入れられた答えをさらに洗練するために、あなたがvar object = Object.create(null)でオブジェクトをインスタンス化するならば、object.hasOwnProperty(property)はTypeErrorを引き起こすことに注意する価値があります。安全のためには、次のようにプロトタイプから呼び出す必要があります。

for (var property in object) {
    if (Object.prototype.hasOwnProperty.call(object, property)) {
        // do stuff
    }
}
1
Konrad Kiss