JS三元運算符vs if / else

Question

試圖更好地了解JavaScript。 我已經在該論壇上回答了一些類似的問題，但是我對此仍然感到困惑。

我在網絡上有一些代碼可以切換模態窗口（div）和疊加層（div）的可見性-（我知道使用jQuery可能會更好，但我想首先了解JS）：

function overlay() {
    el = document.getElementById("overlay");

    /* TERNARY */
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";

    /*
    if(el.style.visibility == "visible"){
        el.style.visibility = "hidden";
    }else if(el.style.visibility == "hidden"){
        el.style.visibility = "visible";
    }

   */   
}

我認為三元運算符只是編寫if / else語句的一種更緊湊的方式。 但是，當我用if / else語句（當前在代碼中注釋掉）替換上面代碼中的三元運算符時，該代碼不起作用。

我可能出了點問題，但我不知道怎么辦？ 有人可以幫忙嗎？

謝謝。

Answer 1

三元運算符（更正確地稱為條件運算符 ）可以替換單個if / else（僅一個比較子句），而不是if / else-if（具有兩個比較）。 所以

var d = (a ? b : c);

等效於：

var d;

if (a) {
    d = b;
} else {
    d = c;
}

因此，在您的情況下，相當於條件運算符的if / else將是：

if (el.style.visibility == "visible") {
    el.style.visibility = "hidden";
} else {
    el.style.visibility = "visible";
}

同樣，嵌套兩個條件運算符可以產生與if / else-if等效的表達式：

el.style.visibility = (el.style.visibility == "visible") ? 
    "hidden" : (el.style.visibility == "hidden") ? 
    "visible" : el.style.visibility;

顯然，在這種情況下，如果您要進行兩次比較，則if / else-if更具可讀性，因此應該首選。

Answer 2

這兩個代碼塊實際上並不相同。

檢查“可見”或其他任何值

/* TERNARY */
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";

檢查“可見”或“隱藏”的值

if(el.style.visibility == "visible"){
    el.style.visibility = "hidden";
}else if(el.style.visibility == "hidden"){
    el.style.visibility = "visible";
}

您沒有檢查的第三個值

style.visibility也可以是"" ，表示默認值。

當天的免費提示：如果看似某個條件不起作用，請使用debugger或console.log進行檢查，以驗證值是否符合您的期望。 99.99％的時間，您會發現這些值與您認為的不一樣。

Answer 3

我以為當一個函數返回另一個函數時，我會添加另一個三元示例。 代替if / else if：

function greetCurried (greeting) {
  return function (name) {
    if (typeof(greeting) !== 'string') {
      return ('Greetings!');
    } else if (typeof(name) !== 'string') {
      return (greeting)
    }
    return (`${greeting}, ${name}`);
  }
}

您可以做三元：

const greetCurried = (greeting) => {
  typeof(greeting) != 'string' ? 'Greetings' : greeting
    return (name) => {
      return typeof(name) != 'string' ? greeting : `${greeting}, ${name}`
    }
  return
}

const greetHello = greetCurried('Hello');

console.log(greetHello('Hedi'));

console.log(greetHello(5));