javascript - 如何解析对象？

Question

如何遍历对象而不是数组？

$(function() {
  var alreadyFilled = false;
  var states = ['Alabama','Alaska','American Samoa','Arizona'];
  function initDialog() {
    clearDialog();
    for (var i = 0; i < states.length; i++) {
      $('.dialog').append('<div>' + states[i] + '</div>');
    }
  }
  initDialog();
});

这是我需要循环遍历的对象，而不是上面的数组。

var states_2 = {
        'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
        'Spain': ['Barcelona'],
        'Hungary': ['Pecs'],
        'USA': ['Downers Grove'],
        'Mexico': ['Puebla'],
}

Answer 1

最简单的调整是先将对象转换为数组，然后您可以使用与原来相同的代码:

var states_2 = {
  'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
  'Spain': ['Barcelona'],
  'Hungary': ['Pecs'],
  'USA': ['Downers Grove'],
  'Mexico': ['Puebla'],
};
var states = [].concat(...Object.values(states_2));
console.log(states);

另请注意，您可以先创建完整的状态 HTML 字符串，然后只追加 一次 - 这样，HTML 只更改一次，而不是多次:

$('.dialog').append(
  states.map(state => '<div>' + state + '</div')
  .join('')
);

要遍历对象本身而不最初更改为数组，只需遍历对象的 Object.values 以获取内部数组:

var states_2 = {
  'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
  'Spain': ['Barcelona'],
  'Hungary': ['Pecs'],
  'USA': ['Downers Grove'],
  'Mexico': ['Puebla'],
};
Object.values(states_2).forEach((arr) => {
  arr.forEach((state) => console.log(state));
});

要同时获取国家/地区名称，请使用 Object.entries 而不是 Object.values 来获取键名 和 的值一次:

Object.entries(states_2).forEach(([key, arr]) => {