多个三元运算符

IT技术 javascript conditional-operator
2021-03-17 13:26:18

我需要一些三元运算符的语法帮助,这将帮助我将正确的标记图标放在我的好地图上。我有三个区域 0、1 和 2,它们具有独特的图标 0、1 和 2。

我曾经只有两个区域,所以这个三元运算符工作正常;

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

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

我尝试了各种方法,但似乎无法正确解决。

6个回答

语法是:

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;
}
在我写完这篇之后,我意识到 0 总是映射到 icon0,所以 Pointy 的答案更可取。但是,如果您需要一个“包罗万象”的值,例如icon0在这种情况下,这种方法仍然可行
2021-04-19 13:26:18
谢谢贾斯汀,我决定最适合我需要的功能。我还发现与三元运算符一起工作更友好,而不是随着时间的推移可能会变得更大。谢谢。
2021-05-16 13:26:18

对于任何对多三元语法感到困惑的人(就像我一样),它是这样的:

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

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

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

怎么样:

var icon = [ icon0, icon1, icon2 ][area];
@JM-AGMS 是的,没错。数组字面量与值是数组的变量一样是数组。
2021-04-16 13:26:18
如果你想让 icon0 成为后备,那就是 icon: { 1: icon1, 2: icon2 }[area] || icon0
2021-04-19 13:26:18
这个操作叫什么?
2021-05-04 13:26:18
@JM-AGMS 这只是一个简单的数组索引操作。area变量包含一个数字。
2021-05-06 13:26:18
['A', 'B', 'C'][area]所以如果area = 2,那C会是值吗?我什至从未想过同时定义和设置数组索引。
2021-05-15 13:26:18

对象字面量怎么样。

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

icon = icons[area];

很简单的方法

如果你的对象是这样的:

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"

这是不是一个很好的测试,如test1 ? test1 : (test2 ? test2 : 'some default value')(test1 ? test1 : test2) ? test2 : 'some default value'两个给出相同的结果
2021-04-29 13:26:18
一个更好的测试将是: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'(不正确)。此测试更好,因为它向您显示了隐式运算符分组。
2021-05-07 13:26:18