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);
});

另一种选择是使用 vanilla Javascript，使用Object.keys()和 Array.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 /阵列/地图

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

但通常情况下，for 循环并不比jQueryor更好Object.keys().map()。我将在下面使用普通的 for 循环讨论两个潜在问题。

对，所以在其他答案中也指出，一个普通的 Javascript 替代方案是

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

这有两个潜在的问题：

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 循环的另一个潜在问题是作用域和非闭包问题。这有点复杂，但以下面的代码为例。我们有一堆 ID 为 button0、button1、button2 等的按钮，我们想在它们上设置一个 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的变量来显示。并且由于此时循环已经完成，变量仍将是“button2”（它在最后一次循环迭代期间的值），因此也将是，即“最后一次点击！”。buttonIdmessagesByButtonId[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 回答