Javascript 每个对象?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11846484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Each for object?
提问by Tom Mesgert
I have object in JavaScript:
我在 JavaScript 中有对象:
var object = someobject;
Object { aaa=true, bbb=true, ccc=true }
How can I use each for this?
我如何为此使用每个?
object.each(function(index, value)) {
console.log(value);
}
Not working.
不工作。
回答by Willem Mulder
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
javascript 对象没有标准的 .each 函数。jQuery 提供了一个函数。见http://api.jquery.com/jQuery.each/下面应该工作
$.each(object, function(index, value) {
console.log(value);
});
Another option would be to use vanilla Javascript using the Object.keys()
and the Array .map()
functions like this
另一种选择是使用 vanilla JavascriptObject.keys()
和这样的 Array.map()
函数
Object.keys(object).map(function(objectKey, index) {
var value = object[objectKey];
console.log(value);
});
See https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Object/keysand https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
请参阅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 /阵列/地图
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.
这些通常比使用普通的 Javascript for 循环更好,除非您真正理解使用普通 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.
但通常,for 循环并不比jQuery
or好用Object.keys().map()
。我将在下面讨论使用普通 for 循环的两个潜在问题。
Right, so also pointed out in other answers, a plain Javascript alternative would be
是的,所以在其他答案中也指出,一个简单的 Javascript 替代方案是
for(var index in object) {
var attr = object[index];
}
There are two potential issues with this:
这有两个潜在的问题:
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
1 . 您想检查您找到的属性是否来自对象本身,而不是来自原型链的上游。这可以用这样的hasOwnProperty
功能检查
for(var index in object) {
if (object.hasOwnProperty(index)) {
var attr = object[index];
}
}
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnPropertyfor more information.
The jQuery.each
and Object.keys
functions take care of this automatically.
该jQuery.each
和Object.keys
功能自动照顾这。
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:
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);
});
}
}
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!".
如果一段时间后,我们单击任何按钮,我们将始终得到“最后一次单击”!在控制台中,永远不要“先点击!” 或“点击中间!”。为什么?因为在onclick函数执行的时候,会messagesByButtonId[buttonId]
使用那个时刻的buttonId
变量来显示。由于循环在那一刻结束,变量仍然是“button2”(它在最后一次循环迭代中的值),所以也会是,即“最后点击!”。buttonId
messagesByButtonId[buttonId]
messagesByButtonId["button2"]
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closuresfor more information on closures. Especially the last part of that page that covers our example.
有关闭包的更多信息,请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures。尤其是该页面的最后一部分,其中涵盖了我们的示例。
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.
同样,jQuery.each
和Object.keys().map()
自动解决这个问题对我们来说,因为它为我们提供了一个function(index, value)
(具有封闭),所以我们是安全的,同时使用索引和值和放心,他们有我们所期望的价值。
回答by Saket Patel
for(var key in object) {
console.log(object[key]);
}
回答by xiaowl
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