それぞれのオブジェクトは？ [重複] 質問する

Question

JavaScriptオブジェクトには標準の.each関数がありません。jQueryは関数を提供します。http://api.jquery.com/jQuery.each/以下は動作するはずです

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

もう一つの選択肢は、次のようにObject.keys()配列関数とVanilla Javascriptを使用することです。.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 ループは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 ループのもう 1 つの潜在的な問題は、スコープと非クロージャの問題です。これは少し複雑ですが、次のコードを例に挙げてみましょう。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);
       });
   }
}

しばらくしてボタンをクリックすると、コンソールには常に「最後にクリックされました」と表示され、「最初にクリックされました」や「真ん中をクリックされました」と表示されることはありません。なぜでしょうか? onclick関数が実行されると、変数messagesByButtonId[buttonId]を使用して表示されるからです。buttonIdその瞬間にループはその時点で終了しているので、buttonId変数は「button2」（最後のループ反復時の値）のままであり、つまり「最後にクリックされました！」messagesByButtonId[buttonId]となります。messagesByButtonId["button2"]

見るhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/クロージャクロージャの詳細については、特に例を説明したページの最後の部分を参照してください。

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

Answer 1