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字符串，并且只创建一次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 2

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

Answer 3

您可以为对象创建一个循环，然后像这样循环来自该国家/地区的每个数组：

$(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 4

使用for ... in循环可以遍历对象。

var states_2 = {
  'Germany': ['Duesseldorf', 
  'Leinfelden-Echterdingen', 
  'Eschborn'],
  'Spain': ['Barcelona'],
  'Hungary': ['Pecs'],
  'USA': ['Downers Grove'],
  'Mexico': ['Puebla'],
};
/** 
* loop through the 'states_2' object.
* the 'k' variable is the current key, 'states_2[k]' is the current key's value.
**/
for(var k in states_2) {
  console.log(k + ': ' + states_2[k]);
}

希望我进一步推动了你。

如何解析对象？

4 个答案: