Question

我有一个测验。这是一系列问题。该程序应该按顺序循环遍历它们。然而，它首先遍历带有数字的所有数组，然后是带有字母的数组，而不是我把它们放入的顺序。以下是问题：

allQuestions = {
    '358670': ['358670', '967723', '214571', '569420', '630697', 0],
    'mbdpf': ['ajcwh', 'xirgb', 'dzelv', 'mbdpf', 'xguqx', 3],
    '637592': ['348335', '921186', '637592', '188551', '391500', 2],
    'xhtjv': ['xhtjv', 'jneez', 'cthul', 'bulwl', 'kqfwc', 0],
    '206471': ['206471', '419643', '366549', '871328', '926142', 0],
    'mwdif': ['bzvai', 'kslgq', 'futgf', 'mwdif', 'sikyp', 3],
    '980924': ['327151', '242777', '708582', '860616', '980924', 4],
    'usiyi': ['iyfod', 'lapwg', 'dqmtt', 'dyvwk', 'usiyi', 4],
    '768898': ['808547', '689143', '875754', '768898', '872606', 3],
    'ziojg': ['xqdiv', 'cyqsu', 'akoed', 'obtpn', 'ziojg', 4]
};

这是codepen，这是整个JS：

window.onload = function() {

var questionArea = document.getElementsByClassName('questions')[0],
    answerArea = document.getElementsByClassName('answers')[0],
    checker = document.getElementsByClassName('checker')[0],
    current = 0,

    allQuestions = {
        '358670': ['358670', '967723', '214571', '569420', '630697', 0],
        'mbdpf': ['ajcwh', 'xirgb', 'dzelv', 'mbdpf', 'xguqx', 3],
        '637592': ['348335', '921186', '637592', '188551', '391500', 2],
        'xhtjv': ['xhtjv', 'jneez', 'cthul', 'bulwl', 'kqfwc', 0],
        '206471': ['206471', '419643', '366549', '871328', '926142', 0],
        'mwdif': ['bzvai', 'kslgq', 'futgf', 'mwdif', 'sikyp', 3],
        '980924': ['327151', '242777', '708582', '860616', '980924', 4],
        'usiyi': ['iyfod', 'lapwg', 'dqmtt', 'dyvwk', 'usiyi', 4],
        '768898': ['808547', '689143', '875754', '768898', '872606', 3],
        'ziojg': ['xqdiv', 'cyqsu', 'akoed', 'obtpn', 'ziojg', 4]
    };


    function loadQuestion(curr) {

    var question = Object.keys(allQuestions)[curr];

    questionArea.innerHTML = '';
    questionArea.innerHTML = question;    
  }

  function loadAnswers(curr) {

    var answers = allQuestions[Object.keys(allQuestions)[curr]];

    answerArea.innerHTML = '';

    for (var i = 0; i < answers.length -1; i += 1) {
      var createDiv = document.createElement('div'),
          text = document.createTextNode(answers[i]);

      createDiv.appendChild(text);      
      createDiv.addEventListener("click", checkAnswer(i, answers));


      answerArea.appendChild(createDiv);
    }
  }

  function checkAnswer(i, arr) {

    return function () {
      var givenAnswer = i,
          correctAnswer = arr[arr.length-1];

      if (givenAnswer === correctAnswer) {
        addChecker(true);             
      } else {
        addChecker(false);                        
      }

      if (current < Object.keys(allQuestions).length -1) {
        current += 1;

        loadQuestion(current);
        loadAnswers(current);
      } else {
        questionArea.innerHTML = 'Done!';
        answerArea.innerHTML = '';
      }

    };
  }

  function addChecker(bool) {

    var createDiv = document.createElement('div'),
        txt       = document.createTextNode(current + 1);

    createDiv.appendChild(txt);

    if (bool) {

      createDiv.className += 'correct';
      checker.appendChild(createDiv);
    } else {
      createDiv.className += 'false';
      checker.appendChild(createDiv);
    }
  }

  loadQuestion(current);
  loadAnswers(current);

};

Answer 1

您在对象上进行迭代，而不是在数组上进行迭代。对象键的顺序不固定 - 如果需要特定顺序，请使用数组：

＆＃13;

var obj = {
  a: 'a',
  1: 1,
  x: 'x'
}
console.log('object keys', Object.keys(obj))

var arr = ['a', 1, 'x']
console.log('array values', arr)

＆＃13;

Answer 2

Javascript对象不保证元素的顺序。您最初放置密钥的顺序不一定是它们被枚举的顺序。

有两种主要方法可以解决这个问题。

使用正确的顺序创建一个与对象分开的数组。

var keys = ['358670', 'mbdpf', '637592', 'xhtjv', '206471', 'mwdif', '980924', 'usiyi', '768898'];`

使用数组存储所有数据而不是对象。

allQuestions = [
    { key: '358670', data: ['358670', '967723', '214571', '569420', '630697', 0] },
    { key: 'mbdpf', data: ['ajcwh', 'xirgb', 'dzelv', 'mbdpf', 'xguqx', 3] },
    // etc.
};

Answer 3

JavaScript中的对象，如大多数其他语言的词典，不保证顺序！阵列。

以下是如何将数据打包成数组：

allQuestions = [
    { 'name': '358670', 'contents': ['358670', '...'] },
    { 'name': 'mbdpf', 'contents': ['...'] } 
];

数字数组在带字母之前加载

3 个答案: