【问题标题】:JavaScript shorthand ternary operatorJavaScript 速记三元运算符
【发布时间】:2012-02-11 15:12:50
【问题描述】:

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

startingNum = startingNum ? startingNum : 1

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

startingNum = startingNum ?: 1

我知道 JavaScript 中的三元运算符:

startingNum = startingNum ? startingNum : 1

...但是有速记吗?

【问题讨论】:

    标签: javascript conditional-operator


    【解决方案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;
        

        这只会在startingNumnullundefined 时更改。

        见: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 evaluatedif 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 truthyif 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 的 || 运算符不返回真或假,它返回第一个“真实”值。假设您有val0val1 作为undefined,而val22val33val0 || val1 || val2 || val3 将返回 2,因为它是第一个“真实”值。
            • 这个习语不是反模式吗?如果您传递 0 或空字符串怎么办,“OR”表达式将跳过它并使用您实际需要的默认值 0 或空字符串。
            • @Paul 确实,这是一个合并操作,但模仿了 OP 的要求。该行为与 OP 的示例没有什么不同。
            • 这些 cmets 也可以很好地添加到答案中,以了解它所谓的“合并操作”及其工作原理:)
            猜你喜欢
            • 2012-07-24
            • 2020-04-29
            • 2011-09-10
            • 1970-01-01
            • 2019-11-09
            • 2016-06-26
            • 2016-01-15
            • 1970-01-01
            相关资源
            最近更新 更多