每个对象？ [复制]

Question

我在 JavaScript 中有对象：

var object = someobject;

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

我该如何使用它们？

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

不工作。

Answer 1

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

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

另一种选择是使用 vanilla Javascript，使用 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

这些通常比使用普通的 Javascript for 循环更好，除非您真正了解使用普通 for 循环的含义并了解它的特定特征（例如循环属性链）的用途。

但通常情况下，for 循环并不比 jQuery 或 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 函数时，它会使用buttonId 变量显示messagesByButtonId[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)（具有闭包），因此我们可以安全地使用索引和值，并放心他们拥有我们期望的价值。

Answer 2

for(var key in object) {
   console.log(object[key]);
}

Answer 3

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