[解決済み] 各オブジェクトに？重複

質問

JavaScriptでオブジェクトを持っています。

var object = someobject;

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

それぞれどのように使えばいいのでしょうか？

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

動作しない。

どのように解決するのですか？

javascriptのオブジェクトは、標準の.each関数を持っていません。参照 http://api.jquery.com/jQuery.each/ 以下のようにするとうまくいくでしょう。

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

もう一つの方法は、バニラ・ジャバスクリプトで Object.keys() と配列 .map() はこのように機能します。

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/Array/map

通常の for ループを使用することの意味を本当に理解し、プロパティチェーン上のループのような特定の特性のために使用する場合を除き、これらは通常、バニラ Javascript の for ループを使用するよりも優れています。

しかし、通常、for-loopは jQuery または 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ループのもう一つの潜在的な問題は、スコープと非閉鎖の問題です。これは少し複雑ですが、例えば次のようなコードを考えてみましょう。button0、button1、button2 などの 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);
       });
   }
}

しばらくしてから、いずれかのボタンをクリックすると、コンソールに "clicked last!" と常に表示され、 "clicked first!" や "clicked middle!" とは決して表示されません。なぜでしょうか？なぜなら、onclick 関数が実行された時点で、次のように表示されるからです。 messagesByButtonId[buttonId] を使用して buttonId 変数 その時 . そして、その時点でループが終了しているので、その時点で buttonId 変数はまだ "button2" (最後のループ反復の間に持っていた値) であり、したがって messagesByButtonId[buttonId] は messagesByButtonId["button2"] となり、すなわち "最後にクリックされました！" となります。

参照 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures をご覧ください。特に、このページの最後の部分は、私たちの例をカバーしています。

もう一度 jQuery.each と Object.keys().map() は、私たちのためにこの問題を自動的に解決してくれます。 function(index, value) (を提供するので、インデックスと値の両方を使用しても安全であり、期待する値を持っていることを保証します。