如何解析对象？

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

您可以为对象创建一个循环，然后循环来自该国家的每个数组，如下所示：

​

$(function() {
  var alreadyFilled = false;
  var states_2 = {
    'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
    'Spain': ['Barcelona'],
    'Hungary': ['Pecs'],
    'USA': ['Downers Grove'],
    'Mexico': ['Puebla'],
  }

  function initDialog() {
    //clearDialog();
    for (var key in states_2) {
      for (var i = 0; i < states_2[key].length; i++) {
        console.log(states_2[key][i])
        //$('.dialog').append('<div>' + states_2[key][i] + '</div>');
      }
    }

  }
  initDialog();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

Answer 2

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

​

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状态，并且只创建append一次-这样，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]) => {

Answer 3

您可以使用嵌套循环。外部循环将通过Object.entries(states_2)，内部循环将遍历每个国家的数组。