Тернарные операторы с более чем одной переменной

Я познакомился с концепцией тернарных операторов, и довольно просто понять нотацию:

desired_variable = true ? false ? "value1" : "value2";

Однако я не мог понять, почему добавлена ​​вторая переменная, даже если я понимаю ответ. Чтобы использовать классический пример:

var eatsPlants = false;
var eatsAnimals = false;
var category;

category = eatsPlants ? eatsAnimals ? "omnivore" : "herbivore" : eatsAnimals ? "carnivore" : undefined;
console.info(category)

Вот одно наблюдение: если я изменю порядок переменных на приведенный ниже оператор, функция не будет работать:

category = eatsAnimals ? eatsPlants? "carnivore" : undefined : eatsPlants ? "herbivore" : "omnivore";
console.info(category)

Мой вопрос: почему функция не работает, когда условия перевернуты? И как мне выбрать порядок членов, когда у меня есть две или более переменных (и, следовательно, четыре или более результатов)?

в одной тройке есть только один вопросительный знак и двоеточие, например variable = comparison ? value1 : value2;

Nina Scholz 09.03.2019 20:18

В общем, если ваш тернарный оператор не является простым супер, вам, вероятно, следует избегать написания логики в виде тернарного оператора и вместо этого просто использовать if/else. Нет смысла размещать все в одной строке, если вам потребуется больше времени, чтобы прочитать и понять, что происходит.

VLAZ 09.03.2019 20:20

Я согласен с тем, что if/else было бы яснее. Проблема в том, что я пытаюсь получить логическое мышление больше, чем окончательный результат.

cgobbet 10.03.2019 10:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
82
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Ответ принят как подходящий

Вы можете понять на этом примере.

x ? ( y ? a : b ) : c
|
|________true   ---> y ? a : b
|
|________false  ---> c
  • сначала проверьте значение x, если оно верно, оно запустится y ? a : b (я добавил () только для удобства чтения)
  • Если это ложь, он перейдет к c

Вы можете просто понять это так же, как if/else, если я изменю приведенный выше код на if/else

if (x){
  if (y) {
    return a
  } else {
    return b
} else {
   return c
 }
}

Спасибо, это мне очень помогло.

cgobbet 12.03.2019 12:24

Тернарные выражения имеют внутри 3 выражения. Однако, поскольку троичные выражения сами по себе являются выражениями, вы можете поместить троичные выражения внутрь других троичных выражений. Тернарные выражения в приведенном выше примере выглядят настолько запутанными, потому что они представляют собой несколько вложенных тернарных выражений. Эта путаница может быть лучше устранена с помощью форматирования и использования круглых скобок:

var eatsPlants = false;
var eatsAnimals = false;
var category = null;

category =
  (eatsPlants ?
    (eatsAnimals ? "omnivore" : "herbivore")
    :
    (eatsAnimals ? "carnivore" : undefined)
  );
console.info(category);

Чтобы получить правильный результат, вы можете сгруппировать тройки и поддерживать один и тот же уровень решений.

var eatsPlants = false,
    eatsAnimals = false,
    category = eatsPlants
        ? eatsAnimals
            ? "omnivore"
            : "herbivore"
        : eatsAnimals
            ? "carnivore"
            : undefined;

console.info(category);

Вы не можете изменить порядок между частями then и else, так как это влияет на результат (если вы также не отмените условие). Однако вы можете изменить вложение и написать либо

category = eatsPlants
  ? eatsAnimals
      ? "omnivore"
      : "herbivore"
  : eatsAnimals
      ? "carnivore"
      : undefined;

или

category = eatsAnimals
  ? eatsPlants
      ? "omnivore"
      : "carnivore"
  : eatsPlants
      ? "herbivore"
      : undefined;

Тернарная операция всегда принимает три операнда, например:

inputExpression ? outputExpressionIfTrue : outputExpressionIfFalse

Код в вопросе использует вывод некоторых троичных операций в качестве входного выражения для других, что можно увидеть более четко, если мы отформатируем его, как в этом фрагменте кода. В каждом случае внешняя операция возвращает результат выполнения внутренней операции (и комментарии поясняют, какая внутренняя операция выполняется и что она возвращает).

var eatsPlants = false;
var eatsAnimals = false;
var category;

category = eatsPlants
  ? (eatsAnimals ? "omnivore" : "herbivore") // doesn't run because eatsPlants is false
  : (eatsAnimals ? "carnivore" : undefined); //returns undefined because eatsAnimals is false 
console.info(category);

category = eatsAnimals
 ? (eatsPlants ? "carnivore" : undefined) // doesn't run because eatsAnimals is false
 : (eatsPlants ? "herbivore" : "omnivore"); // returns "omnivore" because eatsPlants is false
console.info(category);

Обратите внимание, что для обработки информации о категориях вещей с похожими свойствами может быть полезно использовать такие объекты, как:

const carnivore =  {
  eatsPlants: false,
  eatsAnimals: true
};
const herbivore =  {
  eatsPlants: true,
  eatsAnimals: false
};
const omnivore =  {
  eatsPlants: true,
  eatsAnimals: true
};

console.info("carnivore:");
console.info("  eatsPlants: " + carnivore.eatsPlants);
console.info("  eatsAnimals: " + carnivore.eatsAnimals);
console.info("herbivore:");
console.info("  eatsPlants: " + herbivore.eatsPlants);
console.info("  eatsAnimals: " + herbivore.eatsAnimals);
console.info("omnivore:");
console.info("  eatsPlants: " + omnivore.eatsPlants);
console.info("  eatsAnimals: " + omnivore.eatsAnimals);  

Другие вопросы по теме