如何遍历 JavaScript 对象中的所有成员，包括作为对象的值？
例如，我如何循环访问（分别访问“your_name”和“your_message”）？
var validation_messages = {
"key_1": {
"your_name": "jimmy",
"your_msg": "hello world"
},
"key_2": {
"your_name": "billy",
"your_msg": "foo equals bar"
}
}
【问题讨论】：
标签： javascript loops
for(var k in validation_messages) {
var o = validation_messages[k];
do_something_with(o.your_name);
do_something_else_with(o.your_msg);
}
【讨论】：
for (var key in validation_messages) {
// skip loop if the property is from prototype
if (!validation_messages.hasOwnProperty(key)) continue;
var obj = validation_messages[key];
for (var prop in obj) {
// skip loop if the property is from prototype
if (!obj.hasOwnProperty(prop)) continue;
// your code
alert(prop + " = " + obj[prop]);
}
}
【讨论】：
for in 与传统的foreach 非常相似。
for(var key in validation_messages){
for(var subkey in validation_messages[key]){
//code here
//subkey being value, key being 'yourname' / 'yourmsg'
}
}
【讨论】：
如果你使用递归，你可以返回任意深度的对象属性-
function lookdeep(object){
var collection= [], index= 0, next, item;
for(item in object){
if(object.hasOwnProperty(item)){
next= object[item];
if(typeof next== 'object' && next!= null){
collection[index++]= item +
':{ '+ lookdeep(next).join(', ')+'}';
}
else collection[index++]= [item+':'+String(next)];
}
}
return collection;
}
//example
var O={
a:1, b:2, c:{
c1:3, c2:4, c3:{
t:true, f:false
}
},
d:11
};
var lookdeepSample= 'O={'+ lookdeep(O).join(',\n')+'}';
/* returned value: (String)
O={
a:1,
b:2,
c:{
c1:3, c2:4, c3:{
t:true, f:false
}
},
d:11
}
*/
【讨论】：
这个问题
for (var key in validation_messages) {
var obj = validation_messages[key];
for (var prop in obj) {
alert(prop + " = " + obj[prop]);
}
}
是您还将循环遍历原始对象的原型。
有了这个你会避免它：
for (var key in validation_messages) {
if (validation_messages.hasOwnProperty(key)) {
var obj = validation_messages[key];
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
alert(prop + " = " + obj[prop]);
}
}
}
}
【讨论】：
for-in 循环中检查 hasOwnProperty。
在 ECMAScript 5 下，您可以组合 Object.keys() 和 Array.prototype.forEach()：
var obj = {
first: "John",
last: "Doe"
};
//
// Visit non-inherited enumerable keys
//
Object.keys(obj).forEach(function(key) {
console.log(key, obj[key]);
});【讨论】：
for ... in ... hasOwnProperty 模式可以在任何东西上调用，据我所知（对象、数组、null、未定义、true、false、数字原语、对象）。
Object.keys() 让它变慢，而是forEach() 和对.length 的重复访问！如果您改用经典的 for-loop，它几乎是 Firefox 33 中 for..in + hasOwnProperty() 的两倍。
keys 函数和forEach 函数，它需要解析匿名函数，然后在每个元素上调用匿名函数forEach 循环。如果您了解编程，您就会明白所有这些解析和函数调用比 for 结构循环之类的原生解决方案花费的时间要多得多。
AgileJon 答案的优化和改进版本：
var key, obj, prop, owns = Object.prototype.hasOwnProperty;
for (key in validation_messages ) {
if (owns.call(validation_messages, key)) {
obj = validation_messages[key];
for (prop in obj ) {
// Using obj.hasOwnProperty might cause you headache if there is
// obj.hasOwnProperty = function(){return false;}
// but 'owns' will always work
if (owns.call(obj, prop)) {
console.log(prop, "=", obj[prop]);
}
}
}
}
【讨论】：
hasOwnProperty 存储在owns 中，然后调用owns.call(obj, prop) 而不是像this answer 那样只调用obj.hasOwnProperty(prop)？
obj 可能在其自身上定义了hasOwnProperty 函数，因此它不会使用来自Object.prototype 的函数。您可以在 for 这样的循环之前尝试 obj.hasOwnProperty = function(){return false;} 并且它不会遍历任何属性。
_.each(validation_messages, function(value, key){
_.each(value, function(value, key){
console.log(value);
});
});
【讨论】：
我无法让之前的答案完全符合我的要求。
在玩弄了这里的其他回复之后，我做了这个。这很 hacky，但它有效！
对于这个对象：
var myObj = {
pageURL : "BLAH",
emailBox : {model:"emailAddress", selector:"#emailAddress"},
passwordBox: {model:"password" , selector:"#password"}
};
...这段代码：
// Get every value in the object into a separate array item ...
function buildArray(p_MainObj, p_Name) {
var variableList = [];
var thisVar = "";
var thisYes = false;
for (var key in p_MainObj) {
thisVar = p_Name + "." + key;
thisYes = false;
if (p_MainObj.hasOwnProperty(key)) {
var obj = p_MainObj[key];
for (var prop in obj) {
var myregex = /^[0-9]*$/;
if (myregex.exec(prop) != prop) {
thisYes = true;
variableList.push({item:thisVar + "." + prop,value:obj[prop]});
}
}
if ( ! thisYes )
variableList.push({item:thisVar,value:obj});
}
}
return variableList;
}
// Get the object items into a simple array ...
var objectItems = buildArray(myObj, "myObj");
// Now use them / test them etc... as you need to!
for (var x=0; x < objectItems.length; ++x) {
console.log(objectItems[x].item + " = " + objectItems[x].value);
}
... 在控制台中生成：
myObj.pageURL = BLAH
myObj.emailBox.model = emailAddress
myObj.emailBox.selector = #emailAddress
myObj.passwordBox.model = password
myObj.passwordBox.selector = #password
【讨论】：
在我的情况下（基于前面的），任何数量的级别都是可能的。
var myObj = {
rrr: undefined,
pageURL : "BLAH",
emailBox : {model:"emailAddress", selector:"#emailAddress"},
passwordBox: {model:"password" , selector:"#password"},
proba: {odin:{dva:"rr",trr:"tyuuu"}, od:{ff:5,ppa:{ooo:{lll:'lll'}},tyt:'12345'}}
};
function lookdeep(obj,p_Name,gg){
var A=[], tem, wrem=[], dd=gg?wrem:A;
for(var p in obj){
var y1=gg?'':p_Name, y1=y1 + '.' + p;
if(obj.hasOwnProperty(p)){
var tem=obj[p];
if(tem && typeof tem=='object'){
a1=arguments.callee(tem,p_Name,true);
if(a1 && typeof a1=='object'){for(i in a1){dd.push(y1 + a1[i])};}
}
else{
dd.push(y1 + ':' + String(tem));
}
}
};
return dd
};
var s=lookdeep(myObj,'myObj',false);
for (var x=0; x < s.length; ++x) {
console.log(s[x]+'\n');}
结果：
["myObj.rrr:undefined",
"myObj.pageURL:BLAH",
"myObj.emailBox.model:emailAddress",
"myObj.emailBox.selector:#emailAddress",
"myObj.passwordBox.model:password",
"myObj.passwordBox.selector:#password",
"myObj.proba.odin.dva:rr",
"myObj.proba.odin.trr:tyuuu",
"myObj.proba.od.ff:5",
"myObj.proba.od.ppa.ooo.lll:lll",
"myObj.proba.od.tyt:12345"]
【讨论】：
AgileJon 解决方案的改进和递归版本来了 (demo)：
function loopThrough(obj){
for(var key in obj){
// skip loop if the property is from prototype
if(!obj.hasOwnProperty(key)) continue;
if(typeof obj[key] !== 'object'){
//your code
console.log(key+" = "+obj[key]);
} else {
loopThrough(obj[key]);
}
}
}
loopThrough(validation_messages);
此解决方案适用于各种不同的深度。
【讨论】：
另一种选择：
var testObj = {test: true, test1: false};
for(let x of Object.keys(testObj)){
console.log(x);
}
【讨论】：
在 ES6/2015 中，您可以循环访问这样的对象（使用 arrow function）：
Object.keys(myObj).forEach(key => {
console.log(key); // the name of the current key.
console.log(myObj[key]); // the value of the current key.
});
在 ES7/2016 中，您可以使用 Object.entries 代替 Object.keys 并像这样循环访问对象：
Object.entries(myObj).forEach(([key, val]) => {
console.log(key); // the name of the current key.
console.log(val); // the value of the current key.
});
以上内容也可以作为单线：
Object.entries(myObj).forEach(([key, val]) => console.log(key, val));
如果您还想循环遍历嵌套对象，可以使用 recursive 函数 (ES6)：
const loopNestedObj = obj => {
Object.keys(obj).forEach(key => {
if (obj[key] && typeof obj[key] === "object") loopNestedObj(obj[key]); // recurse.
else console.log(key, obj[key]); // or do something with key and val.
});
};
与上面的函数相同，但使用 ES7 Object.entries() 而不是 Object.keys()：
const loopNestedObj = obj => {
Object.entries(obj).forEach(([key, val]) => {
if (val && typeof val === "object") loopNestedObj(val); // recurse.
else console.log(key, val); // or do something with key and val.
});
};
在这里，我们使用Object.entries() 结合Object.fromEntries() 循环遍历嵌套对象更改值并返回一个新对象（ES10/2019）：
const loopNestedObj = obj =>
Object.fromEntries(
Object.entries(obj).map(([key, val]) => {
if (val && typeof val === "object") [key, loopNestedObj(val)]; // recurse
else [key, updateMyVal(val)]; // or do something with key and val.
})
);
循环对象的另一种方法是使用 for ... in 和 for ... of。见vdegenne's nicely written answer。
【讨论】：
我认为值得指出的是，jQuery 使用 $.each() 很好地解决了这个问题。
见：.each()
示例：
$('.foo').each(function() {
console.log($(this));
});
$(this) 是对象内的单个项目。如果您不想使用 jQuery 的选择器引擎，请将 $('.foo') 替换为变量。
【讨论】：
ECMAScript 2017，一个月前刚刚定稿，引入了 Object.values()。所以现在你可以这样做了：
let v;
for (v of Object.values(validation_messages))
console.log(v.your_name); // jimmy billy
【讨论】：
在 ES7 中你可以这样做：
for (const [key, value] of Object.entries(obj)) {
//
}
【讨论】：
此答案是本文中提供的解决方案的汇总 发布一些performance feedbacks。我认为有两个 用例和OP没有提到他是否需要访问密钥才能使用它们 在循环过程中。
✔of 和 Object.keys 方法
let k;
for (k of Object.keys(obj)) {
/* k : key
* obj[k] : value
*/
}
✔in 方法
let k;
for (k in obj) {
/* k : key
* obj[k] : value
*/
}
谨慎使用这个，因为它可以打印obj的原型属性
✔ ES7 方法
for (const [key, value] of Object.entries(obj)) {
}
然而，在编辑的时候，我不推荐 ES7 方法，因为 JavaScript 在内部初始化了很多变量来构建这个过程（参见反馈以获得证明）。除非你不是在开发一个值得优化的大型应用程序，否则没关系，但如果优化是你的首要任务，你应该考虑一下。
✔of 和 Object.values 方法
let v;
for (v of Object.values(obj)) {
}
Object.keys 或 Object.values 性能可以忽略不计例如，
const keys = Object.keys(obj);
let i;
for (i of keys) {
//
}
// same as
for (i of Object.keys(obj)) {
//
}
对于Object.values 的情况，在Firefox 中使用带有缓存变量的本机for 循环似乎比使用for...of 循环要快一些。但是，区别并不那么重要，并且 Chrome 运行 for...of 比原生 for 循环快，所以我建议在任何情况下（第 4 次和第 6 次测试）处理 Object.values 时使用 for...of。
在 Firefox 中，for...in 循环非常慢，所以当我们想在迭代期间缓存密钥时，最好使用Object.keys。此外，Chrome 以相同的速度运行这两种结构（第一次和最后一次测试）。
你可以在这里查看测试：https://jsperf.com/es7-and-misc-loops
【讨论】：
p 是值
for (var key in p) {
alert(key + ' => ' + p[key]);
}
或
Object.keys(p).forEach(key => { console.log(key, p[key]) })
【讨论】：
适合我的解决方案如下：
_private.convertParams = function(params){
var params = [];
Object.keys(values).forEach(function(key) {
params.push({"id":key, "option":"Igual", "value":params[key].id})
});
return params;
}
【讨论】：
var obj = {
name: "SanD",
age: "27"
}
Object.keys(obj).forEach((key) => console.log(key,obj[key]));要遍历 JavaScript Object，我们可以使用 forEach 并优化代码，我们可以使用箭头函数。
【讨论】：
有几种方法可以做到这一点...
1)两层for...in循环...
for (let key in validation_messages) {
const vmKeys = validation_messages[key];
for (let vmKey in vmKeys) {
console.log(vmKey + vmKeys[vmKey]);
}
}
2) 使用Object.key
Object.keys(validation_messages).forEach(key => {
const vmKeys = validation_messages[key];
Object.keys(vmKeys).forEach(key => {
console.log(vmKeys + vmKeys[key]);
});
});
3)递归函数
const recursiveObj = obj => {
for(let key in obj){
if(!obj.hasOwnProperty(key)) continue;
if(typeof obj[key] !== 'object'){
console.log(key + obj[key]);
} else {
recursiveObj(obj[key]);
}
}
}
然后这样称呼它：
recursiveObj(validation_messages);
【讨论】：
JSON.stringify(validation_messages,(field,value)=>{
if(!field) return value;
// ... your code
return value;
})
在这个解决方案中，我们使用replacer，它允许深度遍历整个对象和嵌套对象 - 在每个级别上，您将获得所有字段和值。如果您需要获取每个字段的完整路径，请查看here。
var validation_messages = {
"key_1": {
"your_name": "jimmy",
"your_msg": "hello world"
},
"key_2": {
"your_name": "billy",
"your_msg": "foo equals bar",
"deep": {
"color": "red",
"size": "10px"
}
}
}
JSON.stringify(validation_messages,(field,value)=>{
if(!field) return value;
console.log(`key: ${field.padEnd(11)} - value: ${value}`);
return value;
})【讨论】：
使用 ES8 Object.entries() 应该是一种更紧凑的方式来实现这一点。
Object.entries(validation_messages).map(([key,object]) => {
alert(`Looping through key : ${key}`);
Object.entries(object).map(([token, value]) => {
alert(`${token} : ${value}`);
});
});
【讨论】：
这将遍历由子对象、数组和字符串组成的多维对象并应用自定义函数：
export const iterate = (object, func) => {
const entries = Object.entries(object).map(([key, value]) =>
Array.isArray(value)
? [key, value.map(e => iterate(e, func))]
: typeof value === 'object'
? [key, iterate(value, func)]
: [key, func(value)]
);
return Object.fromEntries(entries);
};
用法：
const r = iterate(data, e=>'converted_'+e);
console.log(r);
【讨论】：
（发现here）：
var lunch = {
sandwich: 'ham',
age: 48,
};
lunch.forEach2(function (item, key) {
console.log(key);
console.log(item);
});
代码：
if (!Object.prototype.forEach2) {
Object.defineProperty(Object.prototype, 'forEach2', {
value: function (callback, thisArg) {
if (this == null) {
throw new TypeError('Not an object');
}
thisArg = thisArg || window;
for (var key in this) {
if (this.hasOwnProperty(key)) {
callback.call(thisArg, this[key], key, this);
}
}
}
});
}
【讨论】：
var validation_messages = {
"key_1": {
"your_name": "jimmy",
"your_msg": "hello world"
},
"key_2": {
"your_name": "billy",
"your_msg": "foo equals bar"
}
}
for (var i in validation_messages) {
console.log("i = \"" + i + "\"");
console.log("validation_messages[\"" + i + "\"] = ");
console.log(validation_messages[i]);
console.log("\n");
for (var j in validation_messages[i]) {
console.log("j = \"" + j + "\"");
console.log("validation_messages[\"" + i + "\"][\"" + j + "\"] = \"" + validation_messages[i][j] + "\"");
console.log("\n");
}
console.log('\n');
}
输出：
i = "key_1"
validation_messages["key_1"] =
{
your_name:"jimmy",
your_msg:"hello world"
}
j = "your_name"
validation_messages["key_1"]["your_name"] = "jimmy"
j = "your_msg"
validation_messages["key_1"]["your_msg"] = "hello world"
i = "key_2"
validation_messages["key_2"] =
{
your_name:"billy",
your_msg:"foo equals bar"
}
j = "your_name"
validation_messages["key_2"]["your_name"] = "billy"
j = "your_msg"
validation_messages["key_2"]["your_msg"] = "foo equals bar"
【讨论】：