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

【问题标题】：i want make this script to be ternary operators我想让这个脚本成为三元运算符
【发布时间】：2018-09-12 08:13:54
【问题描述】：

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;

如果我们可以将上面的第一个代码变成三元运算符，是否可以变得更短？

【问题讨论】：

作为一般的经验法则，在编程时，更喜欢可读性而不是简短。从长远来看，放弃三元组将帮助您和您的程序员同事理解您的意思。
三元运算符的主要目的是用作表达式——返回一些东西。
更好的技术是创建一些 CSS 类 .option-correct { background-color: lightGreen } 等，然后代码可以变成 options1.className = 'option-' + options1.value; 等等，没有任何条件。
@Duncan - 完全同意使用类。不过，您仍然需要确定 score，这涉及条件（在 if 或条件运算符中）。
@Duncan 这是代码的文件，pastebin.com/WczMr8UG，你能给我一个例子，并纠正它，

标签： javascript if-statement ternary-operator

【解决方案1】：

如果您想摆脱所有 if 语句并用条件运算符替换它们，则必须使用丑陋且难以阅读的逗号运算符才能同时执行 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的数组：

function checkAnswers() {
  [options1, options2, options3].forEach((option) => {
    option.style.backgroundColor = option.value === 'correct'
      ? ( score++, 'lightGreen')
      : 'pink';
  });
}

也就是说，我不推荐它，因为它需要逗号运算符，这很容易使代码的读者感到困惑。 IMO，最好选择if/else。

【讨论】：

【解决方案2】：

可能这样做，是的，通过逗号运算符：

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}`)
}

甚至：

function checkAnswers() {
    let score = [option1, option2, option3].reduce(
        (score, option) => score + handleOption(option),
        0
    );
    alert(`your score is ${score}`)
}

【讨论】：