Question

function checkAnswers() {
  let score = 0;

  if (options1.value == 'correct') {
    score++;
    options1.style.backgroundColor = 'lightGreen';
  } else {
    options1.style.backgroundColor = 'pink';
  }

  if (options2.value == 'correct') {
    score++
    options2.style.backgroundColor = 'lightGreen';
  } else {
    options2.style.backgroundColor = 'pink';
  }

  if (options3.value == 'correct') {
    score++
    options3.style.backgroundColor = 'lightGreen';
  } else {
    options3.style.backgroundColor = 'pink';
  }
  alert(`your score is ${score}`)
}

checkButton.onclick = checkAnswers;

我想使此脚本为三元脚本，该怎么做？我试图在下面放这样的代码：

function checkAnswers() {
    options1.value == "correct" ? score++;
    options1.style.backgroundColor = 'lightGreen': options1.style.backgroundColor = 'pink';

    options2.value == "correct" ? score++;
    options2.style.backgroundColor = 'lightGreen': options2.style.backgroundColor = 'pink';

    options3.value == "correct" ? score++;
    options3.style.backgroundColor = 'lightGreen': options3.style.backgroundColor = 'pink';

}

checkButton.onclick = checkAnswers;

是否可以使上面的第一个代码成为三元运算符，变得更短？

Answer 1

如果您想摆脱所有if语句并将其替换为条件运算符，则必须使用难看且难以理解的逗号运算符来同时使用{{ 1}}，并在第一个fork中的单个表达式中将其分配给score++：

backgroundColor

或者，为了进一步压缩它，请遍历function checkAnswers() { options1.style.backgroundColor = option.value === 'correct' ? ( score++, 'lightGreen') : 'pink'; options2.style.backgroundColor = option.value === 'correct' ? ( score++, 'lightGreen') : 'pink'; options3.style.backgroundColor = option.value === 'correct' ? ( score++, 'lightGreen') : 'pink'; }的数组：

options

也就是说，我不建议这样做，因为它需要逗号运算符，该运算符很容易使代码阅读者感到困惑。 IMO，最好使用function checkAnswers() { [options1, options2, options3].forEach((option) => { option.style.backgroundColor = option.value === 'correct' ? ( score++, 'lightGreen') : 'pink'; }); } / if。

Answer 2

通过逗号运算符可能来做到这一点：

drawCircle

逗号运算符非常不寻常：它先计算其左操作数，然后计算其右操作数，并得出其右操作数的值。因此，您可以将左侧操作数用于副作用。

我不推荐，但是有可能。

但是，相反，与其重复自己并用逗号运算符编写难以维护的代码，不如创建一个可重用，清晰，易读的函数：

options1.style.backgroundColor = options1.value == "correct" ? (score++, 'lightGreen') : 'pink';

或类似。那么function handleOption(option) { if (option.value === 'correct') { option.style.backgroundColor = 'lightGreen'; return 1; } else { options.style.backgroundColor = 'pink'; return 0; } }可能是：

checkAnswers

甚至：

function checkAnswers() {
    let score = handleOption(option1) +
                handleOption(option2) +
                handleOption(option3);
    alert(`your score is ${score}`)
}

我想让这个脚本成为三元运算符

2 个答案: