Question

我遇到了一个“语法错误”，这确实很烦人，在尝试修复该错误时，我尝试使用了可怕的语法，因为这基本上就是该错误所说的。错误消息指出：SyntaxError: missing } after property list[Learn More] questions.js:11:1note: { opened at line 1, column 19不应该发生，因为我已经关闭了所有括号，并为嵌套对象使用了完美的JavaScript语法。

let allQuestions = {
    question1: {
        question: 'You should ______ if a large animal is in your path and you cant stop in time.',
        ans1: 'Brake hard',
        ans2: 'Hit the animal at an angle',
        ans3: 'Take your foot of the brakes so it doesnt go through your windshield',
        ans4c: 'All of the above'
    };
    question2: {
        question: 'How come motorcyclists often ride in the left part of the lane?',
        ans1: 'They can pass cyclists on the right part of the lane'
    };

};

Answer 1

只是语法错误。每个嵌套对象后面的分号应该只是逗号。参见：

let allQuestions = {
    question1: {
        question: 'You should ______ if a large animal is in your path and you cant stop in time.',
        ans1: 'Brake hard',
        ans2: 'Hit the animal at an angle',
        ans3: 'Take your foot of the brakes so it doesnt go through your windshield',
        ans4c: 'All of the above'
    },
    question2: {
        question: 'How come motorcyclists often ride in the left part of the lane?',
        ans1: 'They can pass cyclists on the right part of the lane'
    }, //(optional comma here)

};

Answer 2

此处已更正。

let allQuestions = {
    question1: {
        question: 'You should ______ if a large animal is in your path and you cant stop in time.',
        ans1: 'Brake hard',
        ans2: 'Hit the animal at an angle',
        ans3: 'Take your foot of the brakes so it doesnt go through your windshield',
        ans4c: 'All of the above'
    },
    question2: {
        question: 'How come motorcyclists often ride in the left part of the lane?',
        ans1: 'They can pass cyclists on the right part of the lane'
    }

};

console.log(allQuestions);

但是您是否考虑过结构本身，使用数组，以便可以更轻松地迭代代码。

let allQuestions = [{
    question: 'You should ______ if a large animal is in your path and you cant stop in time.',
    answers: [{
        id: 1,
        answer: 'Brake hard'
      },
      {
        id: 2,
        answer: 'Hit the animal at an angle'
      },
      {
        id: 3,
        answer: 'Take your foot of the brakes so it doesnt go through your windshield'
      },
      {
        id: 4,
        answer: 'All of the above'
      }
    ]
  },
  {
    question: 'How come motorcyclists often ride in the left part of the lane?',
    answers: [{
      id: 1,
      answer: 'They can pass cyclists on the right part of the lane'
    }]
  }
];

console.log(allQuestions);

因此，现在使用数组，我们可以轻松构建HTML

let allQuestions = [{
    question: 'You should ______ if a large animal is in your path and you cant stop in time.',
    answers: [{
        id: 1,
        answer: 'Brake hard'
      },
      {
        id: 2,
        answer: 'Hit the animal at an angle'
      },
      {
        id: 3,
        answer: 'Take your foot of the brakes so it doesnt go through your windshield'
      },
      {
        id: 4,
        answer: 'All of the above'
      }
    ]
  },
  {
    question: 'How come motorcyclists often ride in the left part of the lane?',
    answers: [{
      id: 1,
      answer: 'They can pass cyclists on the right part of the lane'
    }]
  }
];

const getAnswerHtml = (answers) => answers.map(a => `<li id="${a.id}">${a.answer}</li>`).join('');
const getQuestionHtml = (question) => `<div class="question"><h3>${question.question}</h3><ul>${getAnswerHtml(question.answers)}</ul></div>`;

document.querySelector('.questions').innerHTML = allQuestions.map(q => getQuestionHtml(q)).join('');

<div class="questions"></div>

嵌套对象语法错误不应该发生

2 个答案: