127

JavaScriptにオブジェクトがあります：

var object = someobject;

Object { aaa=true, bbb=true, ccc=true }

それぞれをどのように使用できますか？

 object.each(function(index, value)) {
      console.log(value);
 }

動作していません。

4

3 に答える 3

319

JavaScript オブジェクトには、標準の .each 関数がありません。jQuery は関数を提供します。http://api.jquery.com/jQuery.each/を参照してください。

$.each(object, function(index, value) {
    console.log(value);
});

Object.keys()別のオプションは、このようなおよび Array.map()関数を使用してバニラ Javascript を使用することです。

Object.keys(object).map(function(objectKey, index) {
    var value = object[objectKey];
    console.log(value);
});

https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Object/keysおよびhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objectsを参照してください。 /配列/マップ

これらは、通常の for ループを使用することの意味を本当に理解し、プロパティ チェーンのループなどの特定の特性の使用を確認しない限り、通常の Javascript の for ループを使用するよりも優れています。

jQueryしかし、通常、for ループはorよりもうまく機能しませんObject.keys().map()。以下では、単純な for ループを使用する際に発生する可能性がある 2 つの問題について説明します。

そうです、他の回答でも指摘されているように、プレーンなJavascriptの代替手段は次のようになります

for(var index in object) { 
    var attr = object[index]; 
}

これには 2 つの潜在的な問題があります。

1. 検索している属性が、プロトタイプ チェーンからではなく、オブジェクト自体からのものかどうかを確認する必要があります。hasOwnPropertyこれは、次のような関数で確認できます

for(var index in object) { 
   if (object.hasOwnProperty(index)) {
       var attr = object[index];
   }
}

詳細については、 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnPropertyを参照してください。

jQuery.eachおよびObject.keys関数は、これを自動的に処理します。

2. 単純な for ループのもう 1 つの潜在的な問題は、スコープと非クロージャの問題です。これは少し複雑ですが、次のコードを例にとります。ボタン0、ボタン1、ボタン2などのIDを持つボタンがたくさんあり、それらにonclickを設定して、次のconsole.logようにします。

<button id='button0'>click</button>
<button id='button1'>click</button>
<button id='button2'>click</button>

var messagesByButtonId = {"button0" : "clicked first!", "button1" : "clicked middle!", "button2" : "clicked last!"];
for(var buttonId in messagesByButtonId ) { 
   if (messagesByButtonId.hasOwnProperty(buttonId)) {
       $('#'+buttonId).click(function() {
           var message = messagesByButtonId[buttonId];
           console.log(message);
       });
   }
}

しばらくしてからいずれかのボタンをクリックすると、常に「最後にクリックされました!」と表示されます。コンソールで、「最初にクリックした」ことはありません！または「中央をクリックしました！」。なんで？onclick関数が実行された時点で、その瞬間の変数をmessagesByButtonId[buttonId]使用して表示されるためです。ループはその時点で終了しているため、変数はまだ「button2」(最後のループ反復中に持っていた値) のままであり、「最後にクリックされた!」となります。buttonIdbuttonIdmessagesByButtonId[buttonId]messagesByButtonId["button2"]

閉鎖の詳細については、 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closuresを参照してください。特に、私たちの例をカバーするそのページの最後の部分.

繰り返しますが、この問題は自動的jQuery.eachにObject.keys().map()解決されます。なぜなら、function(index, value)(クロージャを持つ) が提供されるため、インデックスと値の両方を安全に使用でき、それらが期待する値を持っていることを確信できます。

于 2012-08-07T12:56:18.677 に答える
77 
for(var key in object) {
   console.log(object[key]);
}
于 2012-08-07T12:56:21.250 に答える
-1 

var object = { "a": 1, "b": 2};
$.each(object, function(key, value){
  console.log(key + ": " + object[key]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

//output
a: 1
b: 2
于 2012-08-07T12:56:48.803 に答える