JavaScript 速记三元运算符

Posted 2023-02-23

【中文标题】JavaScript 速记三元运算符

【英文标题】：JavaScript shorthand ternary operator

【发布时间】：2012-02-11 15:12:50

【问题描述】：

我知道在 php 5.3 中不要使用这种多余的三元运算符语法：

startingNum = startingNum ? startingNum : 1

...我们可以在适用的情况下为三元运算符使用简写语法：

startingNum = startingNum ?: 1

我知道 javascript 中的三元运算符：

startingNum = startingNum ? startingNum : 1

...但是有速记吗？

【参考方案1】：

您可以使用接受的答案，但它并不理想，因为它在与布尔值一起使用时会中断，如果您默认为 true，它将始终评估为 true ->

var undefinedVal: boolean;
var trueVal = true;
var falseVal = false;

Angular 模板示例：

Value :  undefinedVal || true  -> true
Value :  trueVal || true  -> true
Value :  falseVal || true  -> true?

所以在使用 bools 时使用 long way：

Value :  (val != null) ? val : true 

还要注意打字稿和 C#（我认为），当使用带有字符串连接的三元时，它必须放在括号中 ->

console.log("Value :" + ((val != null) ? val : true));

【参考方案2】：

随着 ES2020 的加入：

新 w/Nullish Coalescence：const difficulty = var?.nest[i]?.prop ?? false

老操作：const difficulty = var.nest[i].prop ? var.nest[i].prop : false

属性前的问号将首先检查对象是否存在（如果您不确定它是否存在：就像在 API 数据中一样），如果缺少对象，它将返回 undefined

?? 检查左侧的值是 null 还是 undefined，如果是，则返回右侧提供的值。

【参考方案3】：

现在您可以在大多数现代浏览器中使用：

startingNum ??= 1;

这只会在startingNum 为null 或undefined 时更改。

见：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment

【参考方案4】：

制作三元像：

boolean_condition ? true_result : false_result

在javascript中，你可以这样做：

(boolean_condition && true_result ) || false_result;

例子：

(true && 'green') || 'red';
=> "green"
(false && 'green') || 'red';
=> "red"

【讨论】：

sooo x = innerWidth * 0.0375 > 24 ? innerWidth * 0.0375 : 24 会变成 (innerWidth * 0.0375 > 24 && innerWidth * 0.0375) || 24??有没有简写，这样我就不用重复innerWidth * 0.0375，除了把它赋值给一个变量？？？

在这种情况下，Math.max( innerWidth * 0.0375 , 24 ) 可以很好地工作。对于更一般的情况，最好创建一个名为 e.g. 的描述性方法。 'somethingifiedInnerWidth' 提高了可读性，而不是创建变量。尽管在某些情况下，拥有一个（具有该描述性名称的）变量会更具可读性，但未来的问题是“为什么要乘以这个？”没有提出。

哇甚至不知道你可以为Math.max 提供第二个参数。超级优雅的解决方案！

【参考方案5】：

startingNum = startingNum || 1

如果你有一个为空的条件，比如

startingNum = startingNum ? startingNum : null

你可以使用'&&'

startingNum = startingNum && startingNum

【讨论】：

但是除非anything 是假的，否则anything && null 不会评估为null？

是的，如果有什么是真实的，它的计算结果为空。如果它是假的，则评估为假值

【参考方案6】：

以上答案都是正确的。在 JavaScript 中，如下语句：

startingNum = startingNum ? otherNum : 1

可以表示为

startingNum = otherNum || 1

此处未涉及的另一种情况是，如果您希望值在不匹配时返回 false。 JavaScript 的简写是：

startingNum = startingNum ? otherNum : 0

但可以表示为

startingNum = startingNum && otherNum

只是想涵盖另一种情况，以防其他人正在寻找更笼统的答案。

【讨论】：

有这样的简写：x = innerWidth * 0.0375 > 24 ? innerWidth * 0.0375 : 24???

@Anthony 不，因为innerWidth * 0.0375 > 24 不同于if true 部分，即innerWidth * 0.0375。仅当expression to be evaluated 和if true 的值相同时才能使用速记。与您无法简写 x = someBoolean ? 'Heck yea!' : 'No way!' 的原因相同。

@deedub 好吧，实际上，有一个“速记”（如果你这么叫的话）就是Math.max(innerWidth * 0.0375, 24)

@Anthony 你不会这么称呼它的 ;) 但在你的用例中，Math.max 比三元运算符效果更好。

“startingNum = startingNum ? otherNum : 1可以表示为startingNum = otherNum || 1”是错误的。我刚刚测试了这个

【参考方案7】：

|| 将返回它遇到的第一个真值，因此可以用作合并运算符，类似于 C# 的 ??

startingNum = startingNum || 1;

【讨论】：

我比其他人更喜欢你的解释

【参考方案8】：

是的，有：

var startingNum = startingNum || 1;

一般来说，expr1 || expr2 的工作方式如下（如the documentation 所述）：

如果可以转换为true，则返回expr1；否则，返回expr2。 因此，当与Boolean 值一起使用时，如果任一操作数为true，|| 将返回true；如果两者都是false，则返回false。

【讨论】：

if a is truthy 与 if a is evaluated to true 不是更正确吗？

@JaredPar：为避免歧义，我将原来的详细解释替换为来自 Mozilla 开发者网络的解释。它应该不那么模棱两可。

【参考方案9】：

var startingNum = startingNum || 1;

在这种情况下，您可以使用 OR 运算符。

【参考方案10】：

var startingNumber = startingNumber || 1;

类似你正在寻找的东西，如果未定义则默认在哪里？

var foo = bar || 1; // 1
var bar = 2;
foo = bar || 1;     // 2

顺便说一句，这适用于很多场景，包括对象：

var foo = bar || ; // secure an object is assigned when bar is absent

【讨论】：

谢谢！你搞定了。我实际上在这个实例中使用了一个对象。 :)

对于好奇的人来说，这是可行的，因为 JS 的 || 运算符不返回真或假，它返回第一个“真实”值。假设您有val0 和val1 作为undefined，而val2 是2，val3 是3。 val0 || val1 || val2 || val3 将返回 2，因为它是第一个“真实”值。

这个习语不是反模式吗？如果您传递 0 或空字符串怎么办，“OR”表达式将跳过它并使用您实际需要的默认值 0 或空字符串。

@Paul 确实，这是一个合并操作，但模仿了 OP 的要求。该行为与 OP 的示例没有什么不同。

这些 cmets 也可以很好地添加到答案中，以了解它所谓的“合并操作”及其工作原理：)