я хочу, чтобы этот скрипт был троичным оператором - PullRequest
Новая
       16

я хочу, чтобы этот скрипт был троичным оператором

0 голосов
/ 12 сентября 2018 
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;

Возможно ли это, если бы мы могли сделать первый код сверху троичным оператором, стать короче?

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

Это возможно сделать это, да, через оператор запятой: 

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}`)
}
0 голосов
/ 12 сентября 2018

Если вы хотите избавиться от всех своих операторов 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';
  });
}
* 1010Тем не менее, я бы не советовал, потому что для этого требуется оператор запятой, который может легко запутать читателей кода.ИМО, лучше пойти с if / else.
...