如何循环遍历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"
    }
}

当前回答

有很多方法可以遍历对象。请查看以下示例。

var obj = {'name':'John Doe','email':'johndoe@example.com'}

方法1

var keys = Object.keys(obj)
for(var i= 0; i < keys.length;i++){
  console.log(keys[i]+ ': ' + obj[keys[i]])
}

方法2

for(var key in obj){
  console.log(key+': '+ obj[key])
}

方法3

Object.keys(obj).forEach(function (key) {
  console.log(key+ ': ' + obj[key])
})

其他回答

p是值

for (var key in p) {
  alert(key + ' => ' + p[key]);
}

OR

Object.keys(p).forEach(key => { console.log(key, p[key]) })

2020年,您需要不可变的通用函数

这将遍历由子对象、数组和字符串组成的多维对象,并应用自定义函数:

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

在ES6/2015中,您可以循环遍历如下对象(使用箭头函数):

Object.keys(myObj).forEach(key => {
  console.log(key);        // the name of the current key.
  console.log(myObj[key]); // the value of the current key.
});

JS箱

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

jsbin公司

如果您也想循环遍历嵌套对象,可以使用递归函数(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.
  });
};

JS箱

与上述函数相同,但使用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。。。为。。。属于看看vdegenne写得很好的答案。

每个2

(在此处找到):

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

我认为值得指出的是,jQuery使用$.each()很好地解决了这个问题。

请参见:.each()

例子:

$('.foo').each(function() {
    console.log($(this));
});

$(this)是对象内的单个项目。如果不想使用jQuery的选择器引擎,请将$('.foo')转换为变量。