Javascript函数编写约定

Question

我遇到了这段代码，但我无法阅读它，我从未见过这样编写的代码。

showMenuButton[isOpened ? "hide" : "show"]();
hideMenuButton[isOpened ? "show" : "hide"]();
isOpened ? container.removeClass("hideMenu") : container.addClass("hideMenu");

和

一样吗

if(isOpened="hide"){
showMenuButton();
}
else{
hideMenuButton();
}

有人可以解释一下代码的作用以及为什么要这样写吗？仅仅是因为它们更短吗？ (我从来没有见过函数调用中的[])。

谢谢。

这里是完整的 JavaScript 代码。

menuToggle = $("#menuToggle"),
        showMenuButton = $(".menuToggle_show"),
        hideMenuButton = $(".menuToggle_hide"),
        toggleSideMenu = function (isOpened) {

        showMenuButton[isOpened ? "hide" : "show"]();
        hideMenuButton[isOpened ? "show" : "hide"]();

        isOpened ? container.removeClass("hideMenu") : container.addClass("hideMenu");
        }

Answer 1

Javascript有2 ways of referring to objects/method calls - 点符号和方括号符号。它们是可以互换的，并且是等价的，所以下面的两行是相同的

var x = someObject.someProperty;
// or 
var x = someObject["someProperty"];

这也适用于方法，因此下面的两个都可以工作(注意与上面的区别是调用方法的括号)

someObject.someFunction();
// or 
someObject["someFunction"]();

现在，将其与您的问题联系起来，还有另一个技巧在起作用；三元运算符:

var result = someCondition ? trueResult : falseResult

把这些放在一起

showMenuButton[isOpened ? "hide" : "show"]();
hideMenuButton[isOpened ? "show" : "hide"]();

等于

if(isOpened){
    showMenuButton["hide"](); // or, showMenuButton.hide();
    hideMenuButton["show"](); // or, hideMenuButton.show();
}
else{
    showMenuButton["show"](); // or, showMenuButton.show();
    hideMenuButton["hide"](); // or, hideMenuButton.hide();
}

(它基本上是根据当前是否处于打开状态来切换显示/隐藏按钮)