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

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 语句并用条件运算符替换它们，则必须使用丑陋且难以阅读的逗号运算符才能同时执行这两项操作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.

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

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

i want make this script to be ternary operators

javascript

if-statement

ternary-operator