每个对象？ [英] Each for object?

问题描述

可能重复：

迭代对象文字值

我在JavaScript中有对象：

I have object in JavaScript:

var object = someobject;

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

我如何使用它？

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

不工作。

推荐答案

javascript对象没有标准的.each函数。 jQuery提供了一个功能。请参阅 http://api.jquery.com/jQuery.each/ 以下内容应该有效

A javascript Object does not have a standard .each function. jQuery provides a function. See http://api.jquery.com/jQuery.each/ The below should work

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

另一种选择是使用 Object.keys（）来使用vanilla Javascript 和数组 .map（）这样的函数

Another option would be to use vanilla Javascript using the Object.keys() and the Array .map() functions like this

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

这些通常比使用vanilla Javascript for循环要好，除非你真的了解使用正常for循环的含义，并看看如何使用它的特定特征，如在属性链上循环。

These are usually better than using a vanilla Javascript for-loop, unless you really understand the implications of using a normal for-loop and see use for it's specific characteristics like looping over the property chain.

但通常情况下，for循环不能比 jQuery 或对象更好用.keys（）。图（）。我将在下面使用简单的for循环进入两个潜在的问题。

But usually, a for-loop doesn't work better than jQuery or Object.keys().map(). I'll go into two potential issues with using a plain for-loop below.

对，所以也指出其他答案，一个简单的Javascript替代方案是

Right, so also pointed out in other answers, a plain Javascript alternative would be

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

这有两个潜在问题：

1。您想要检查您要查找的属性是来自对象本身而不是来自原型链。这可以使用 hasOwnProperty 函数进行检查，如下所示

1 . You want to check whether the attribute that you are finding is from the object itself and not from up the prototype chain. This can be checked with the hasOwnProperty function like so

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 以获取更多信息。

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty for more information.

jQuery.each 和 Object.keys 函数自动处理。

2。普通for循环的另一个潜在问题是范围和非闭包。这有点复杂，但是请参考以下代码。我们有一堆带有ids button0，button1，button2等的按钮，我们想在它们上设置onclick并执行 console.log ，如下所示：

2 . Another potential issue with a plain for-loop is that of scope and non-closures. This is a bit complicated, but take for example the following code. We have a bunch of buttons with ids button0, button1, button2 etc, and we want to set an onclick on them and do a console.log like this:

<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函数时，它将使用 buttonId 变量 messagesByButtonId [buttonId] >那一刻。并且由于循环在那一刻结束， buttonId 变量仍将是button2（它在上一次循环迭代期间具有的值），因此 messagesByButtonId [buttonId] 将是 messagesByButtonId [button2] ，即点击最后！。

If, after some time, we click any of the buttons we will always get "clicked last!" in the console, and never "clicked first!" or "clicked middle!". Why? Because at the time that the onclick function is executed, it will display messagesByButtonId[buttonId] using the buttonId variable at that moment. And since the loop has finished at that moment, the buttonId variable will still be "button2" (the value it had during the last loop iteration), and so messagesByButtonId[buttonId] will be messagesByButtonId["button2"], i.e. "clicked last!".

请参阅 https://developer.mozilla.org / en-US / docs / Web / JavaScript / Closures 有关闭包的更多信息。特别是该页面的最后一部分，涵盖了我们的示例。

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures for more information on closures. Especially the last part of that page that covers our example.

再次， jQuery.each 和 Object.keys（）。map（）为我们自动解决这个问题，因为它为我们提供了一个函数（索引，值） （有关闭）因此我们可以安全地使用索引和值，并确保它们具有我们期望的值。

Again, jQuery.each and Object.keys().map() solve this problem automatically for us, because it provides us with a function(index, value) (that has closure) so we are safe to use both index and value and rest assured that they have the value that we expect.

这篇关于每个对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！