我有一个 JavaScript 对象:
var object = someobject;
Object { aaa=true, bbb=true, ccc=true }
我如何在这种情况下使用each?
object.each(function(index, value)) {
console.log(value);
}
不起作用。
我有一个 JavaScript 对象:
var object = someobject;
Object { aaa=true, bbb=true, ccc=true }
我如何在这种情况下使用each?
object.each(function(index, value)) {
console.log(value);
}
不起作用。
JavaScript对象没有标准的 .each 函数,jQuery 提供了一个函数。请参见http://api.jquery.com/jQuery.each/。下面的代码应该可以工作。
$.each(object, function(index, value) {
console.log(value);
});
另一种选择是使用纯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];
}
}
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);
});
}
}
如果一段时间后我们点击任何一个按钮,控制台始终会显示"clicked last!"而不是"clicked first!"或"clicked middle!"。为什么?因为在执行onclick函数时,它将使用此时此刻的buttonId
变量来显示messagesByButtonId[buttonId]
。而此时循环已经结束,所以buttonId
变量将仍然是"button2"(在最后一次循环迭代期间拥有的值),因此messagesByButtonId[buttonId]
将是messagesByButtonId["button2"]
,即"clicked last!"。jQuery.each
和Object.keys().map()
可以自动解决此问题,因为它们为我们提供了一个具有闭包的function(index, value)
,因此我们可以安全地使用索引和值,并确保它们具有我们期望的值。array1.map(x => x * 2)
)。如果不想创建新数组,则可以使用 forEach 替代 map。 - Ilan Schemoulfor(var key in object) {
console.log(object[key]);
}
console.log(key);
。 - Saket Patelvar 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