多个三元运算符

Question

我需要一点语法帮助，使用三元运算符可以帮助我将正确的标记图标放在我的地图上。我有三个区域0、1和2，分别有唯一的图标0、1和2。

以前只有两个区域，所以这个三元运算符运行良好；

var icon = (area == 1) ? icon1 : icon0;

现在我需要为area2添加一个额外的第三个图标（icon2）。

我尝试了各种方法，但似乎就是无法做到正确。

- Sam

Answer 1

语法如下：

var icon = (area == 1) ? icon1 : (area == 2) ? icon2 : icon0;

但这开始变得复杂了。你可能最好只需创建一个函数来完成此工作：

var icon = getIcon(area);

function getIcon(area) {
  if (area == 1) { 
    return icon1; 
  } else if (area == 2) { 
    return icon2; 
  }

  return icon0;
}

- Justin Ethier

---

写完之后，我意识到0总是映射到icon0，所以Pointy的答案更可取。然而，如果您需要一个“万能”的值，例如在这种情况下使用icon0，则仍然可以采用这种方法。 - Justin Ethier

谢谢Justin，我决定使用最适合我的需求的函数。我也发现它比三元运算符更友好，因为后者随着时间的推移可能会变得越来越大。谢谢。 - Sam

Answer 2

对于那些对多种三元语法感到困惑的人（就像我一样），它是这样的：

var yourVar = condition1 ? someValue
            : condition2 ? anotherValue
            : defaultValue;

您可以添加任意数量的条件。

您可以在https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_Operator上进一步阅读。

- Adam

Answer 3

怎样呢：

var icon = [ icon0, icon1, icon2 ][area];

- Pointy

---

这个操作叫什么？ - JM-AGMS

@JM-AGMS 这只是一个简单的数组索引操作。area变量包含一个数字。 - Pointy

如果 area=2，那么 C 就是该数组中的值吗？我甚至没想过可以同时定义和设置数组索引。 - JM-AGMS

@JM-AGMS 是的，没错。一个数组字面量和一个值为数组的变量一样都是一个数组。 - Pointy

如果你想让icon0成为后备，那么它只需要是icon: { 1: icon1, 2: icon2 }[area] || icon0。 - aaaaaa

Answer 4

那么用一个对象字面量怎么样呢。

icons = {
    0: icon0,
    1: icon1,
    2: icon2
}

icon = icons[area];

- Bruno

Answer 5

非常简单的方法

如果你的对象像这样：

var obj = {
  x: true,
  y: {
    xy: 'some value'
  }
}

var result = obj ? obj.y ? obj.y.xy ? obj.y.xy : 'N/A' : 'N/A' : 'N/A'

console.log(result) // "some value"

- Sushil Dhayal

---

这不是一个很好的测试，因为 test1 ? test1 : (test2 ? test2 : 'some default value') 和 (test1 ? test1 : test2) ? test2 : 'some default value' 都会得到相同的结果。 - chharvey

一个更好的测试是：var test = true; var result = test===true ? 'it is true' : test===false ? 'it is false' : 'it is null'。这样当你将最后两个运算符分组时，test===true ? 'it is true' : (test===false ? 'it is false' : 'it is null')，你会得到 'it is true'（正确），但当你将前两个运算符分组时，(test===true ? 'it is true' : test===false) ? 'it is false' : 'it is null'，你会得到 'it is false'（不正确）。这个测试更好，因为它展示了隐式运算符分组。 - chharvey

Answer 6

var icon = (area == 0) ? icon0 : (area == 1) ? icon1 : icon2;

- John Hartsock

---

快速问题：括号是否必要？ - oldboy

@BugWhisperer 我相信你指的是括号，而不是必须要用括号，只是想要显示分隔。 - John Hartsock

是的，那就是我想表达的意思。好的，我知道在某些情况下括号是必要的，这就是为什么我问的原因。 - oldboy

Answer 7

一系列的问号运算符`?`可以返回一个依赖于多个条件的值。

例如：

let age = prompt('age?', 18);

let message = (age < 3) ? 'Hi, baby!' :
  (age < 18) ? 'Hello!' :
  (age < 100) ? 'Greetings!' :
  'What an unusual age!';

alert( message ); 

- Rijo Sebastian

---

根据目前的写法，你的回答不够清晰。请编辑以添加更多细节，帮助其他人理解这如何回答所提出的问题。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community