用三元运算符整理 javascript

Posted 2023-02-23

【中文标题】用三元运算符整理 javascript

【英文标题】：Tidying up javascript with ternary operator

【发布时间】：2012-07-25 08:52:27

【问题描述】：

我知道这段代码很乱：

$("#tog-desc").click(function(e) 
    $(this).toggleClass("open");
    $(".description").slideToggle();

    if( $(this).hasClass("open") ) 
        $(this).html("Hide Description").css("background-position", "85px 3px");
    
    else 
        $(this).html("Show Description").css("background-position", "88px -10px");
    

    e.preventDefault();
);

但我不确定如何使用三元运算符整理它以使其简洁明了。我似乎总是用 javascript 编写过长的 if/else 语句，我想了解如何不必这样做！

编辑：默认情况下#tog-desc 显示“显示说明”并且隐藏 .description，以防这不明显

谢谢。

【问题讨论】：

看来您有一些不同的建议可供选择：-)

【参考方案1】：

正如您在此处的其他一些答案中看到的，当然可以使用三元运算符将您的代码缩短几行。

但是，我质疑这样做的价值。代码不是写尽可能短的形式的竞赛。在性能方面，您的代码绝对没有有问题；与 if 语句相比，三元组在本质上并没有或多或少的性能。

此外，必须考虑可维护性。就目前而言，您的代码在当前形式下更易于扫描和理解。虽然三元运算符可以为您节省几行代码，但同样，这与行数无关，而是与提供具有合理性能的功能有关。您应该评估改进的地方不是代码长度本身，而是代码重用、效率以及最后通过缩小器的文件大小。

有使用三元运算符的时间和地点——它不是你应该在已经运行的代码中添加的东西，只是为了消除一些清晰易读的功能代码行。

更多阅读

http://blog.ashodnakashian.com/2011/03/code-readability/ https://docs.google.com/presentation/d/1zHb855D5fQAKix47YCeVCH6QUQFzwCTxuz5GFMoNQyc/edit?pli=1#slide=id.p 可读代码的艺术有一个关于三元的部分 - http://www.amazon.com/The-Readable-Code-Dustin-Boswell/dp/0596802293

编辑一件事......您可以删除单行条件句周围不必要的花括号：

$("#tog-desc").click(function(e) 
    e.preventDefault();

    $(this).toggleClass("open");
    $(".description").slideToggle();
    if( $(this).hasClass("open") )
        $(this).html("Hide Description").css("background-position", "85px 3px");
    else
        $(this).html("Show Description").css("background-position", "88px -10px");
);

【讨论】：

你在“删除不必要的花括号”部分迷失了我。我不能同意

如果这是最终代码，并且条件只有一行，您可以（强调重要）删除那些额外的花括号。我个人总是把它们留下——每次我把它们取下来，我稍后再回来，需要添加一些东西并诅咒自己没有把它们放在那里（或者因为没有把它们取下来）

有趣的点，非常感谢。我想我只需要对这些事情不那么执着……下面所有真正简洁的答案我都很难理解。

+1 我认为这些都很好。我特别喜欢“删除不必要的花括号”部分。去掉分号，它反映了我自己的非 *** 代码。干净整洁。

@artparks 而 那 正是我所了解的。太棒了，您已经构建了一个超级棒的单线三元量子模运算，它以 16 个字符运行您的整个应用程序。您还必须坐在那里阅读片刻，以解析它到底做了什么。当您分心时，有人让您的猫出去，而梳妆台上的零钱不见了。避免。

【参考方案2】：

$("#tog-desc").click(function(e) 
    var $this = $(this), has_cls = $this.hasClass("open");
    $this.toggleClass("open")
       .text((has_cls ? "Hide" : "Show") + " Description")
       .css("background-position", has_cls ? "85px 3px" : "88px -10px");

    $(".description").slideToggle()

    e.preventDefault();
);

---

或者将.open css 类的背景位置部分...

$("#tog-desc").click(function(e) 
    var $this = $(this);
    $this.toggleClass("open")
       .text(($this.hasClass("open") ? "Hide" : "Show") + " Description");

    $(".description").slideToggle();

    e.preventDefault();
);

【讨论】：

这是最简洁的，所以我宣布它是赢家！虽然平心而论，我确实很难（作为一名设计师但自学成才的编码人员）真正理解这一点，正如克里斯上面所说，也许这同样重要。非常感谢

@Alexander：公平点。我更新了这一改进，并将html() 更改为text()。

@artparks：这绝对是一个考虑因素。另一种可能性是拥有两个不同的元素，并显示/隐藏它们而不是修改单个元素。这可能会更干净一些。

【参考方案3】：

var open = $(this).hasClass('open');
$(this)
  .html( ( open ? "Show" : "Hide" ) + " Description")
  .css("background-position", open ? '85px 3px' : '88px -10px' );

这就是你所追求的吗？基本上：

<condition> ? <true_result> : <false_result>

【讨论】：

你仍然需要切换类:)

@Alexander：我只剪掉了代码 sn-p 的if...else... 部分（假设这是唯一需要重构的部分）。我也没有slideToggle 或e.preventDefault。

【参考方案4】：

嗯，我不知道它是否会让它更好，但你可以这样做：

var update = $(this).hasClass('open') ? 
   label: "Hide Description", position: "85px 3px"  :
   label: "Show Description", position: "88px -10px" ;

$(this).html(update.label).css("background-position", update.position);

【讨论】：

同样，你仍然需要切换类:)

@Alexander 啊，是的，你是对的。无论如何，我喜欢基于类名使用 CSS（包括消息，可以保存在单独的 <span> 元素中）来完成这一切的答案。

【参考方案5】：

我不确定这是否更清洁，但这应该可以：

$("#tog-desc").click(function(e) 
    $(this).toggleClass("open");
    $(".description").slideToggle();

    var open = $(this).hasClass("open");
    $(this).html((open ? "Hide" : "Show") + " Description")
           .css("background-position", "85px " + (open ? "85px" : "3px");

    e.preventDefault();
);