Question

已经向我介绍了三元运算符的概念，理解该表示法非常简单：

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

但是，即使我知道答案，我也无法理解添加第二个变量的背后原因。使用经典示例：

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

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

在这里，有一个观察：如果我将变量的顺序更改为下面的语句，该函数将无法正常工作：

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

我的问题：术语倒置时，为什么函数不起作用？当我有两个或多个变量（因此有四个或更多结果）时，如何选择术语的顺序？

Answer 1

三元表达式内部有3个表达式。但是，由于三元表达式本身就是表达式，您可以将三元表达式放在其他三元表达式中。上面的示例中的三元表达式看起来很混乱，因为它们是多个嵌套的三元表达式。可以通过设置格式和使用括号来更好地消除这种混淆：

var eatsPlants = false;
var eatsAnimals = false;
var category = null;

category =
  (eatsPlants ?
    (eatsAnimals ? "omnivore" : "herbivore")
    :
    (eatsAnimals ? "carnivore" : undefined)
  );
console.log(category);

Answer 2

您可以通过此示例理解

。

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

Answer 3

要获得正确的结果，您可以对三元组进行分组并保持相同级别的决策。

var eatsPlants = false,
    eatsAnimals = false,
    category = eatsPlants
        ? eatsAnimals
            ? "omnivore"
            : "herbivore"
        : eatsAnimals
            ? "carnivore"
            : undefined;

console.log(category);

Answer 4

您无法更改then和else部分之间的顺序，因为这会影响结果（如果您也没有否定条件）。但是，您可以更改嵌套，并写一个或一个

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

或

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

Answer 5

三元操作始终采用三个操作数，例如：

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.log(category);

category = eatsAnimals
 ? (eatsPlants ? "carnivore" : undefined) // doesn't run because eatsAnimals is false
 : (eatsPlants ? "herbivore" : "omnivore"); // returns "omnivore" because eatsPlants is false
console.log(category);

请注意，要处理有关具有相似属性的事物类别的信息，使用对象可能会有所帮助，例如：

const carnivore =  {
  eatsPlants: false,
  eatsAnimals: true
};
const herbivore =  {
  eatsPlants: true,
  eatsAnimals: false
};
const omnivore =  {
  eatsPlants: true,
  eatsAnimals: true
};

console.log("carnivore:");
console.log("  eatsPlants: " + carnivore.eatsPlants);
console.log("  eatsAnimals: " + carnivore.eatsAnimals);
console.log("herbivore:");
console.log("  eatsPlants: " + herbivore.eatsPlants);
console.log("  eatsAnimals: " + herbivore.eatsAnimals);
console.log("omnivore:");
console.log("  eatsPlants: " + omnivore.eatsPlants);
console.log("  eatsAnimals: " + omnivore.eatsAnimals);

具有多个变量的三元运算符

5 个答案: