帶有函數的 JavaScript 三元運算符示例

Question

我正在使用 jQuery 1.7.1

我剛剛開始使用 JavaScript 三元運算符來替換簡單的 if/else 語句。 我已經在幾個地方成功地做到了這一點。 當我認為肯定不會的時候，我成功地使其他東西起作用時我感到驚訝，但我還是嘗試了。

以下是聲明原文：

function updateItem() {
    $this = $(this);
    var IsChecked = $this.hasClass("IsChecked");
    if (IsChecked == true){
        removeItem($this);
    } else {
        addItem($this);
    }
}

這是使用三元運算符的相同函數：

function updateItem() {
    $this = $(this);
    var IsChecked = $this.hasClass("IsChecked");
    (IsChecked == true) ? removeItem($this) : addItem($this);
}

我很驚訝，因為我看到使用的所有示例都只是設置這樣的變量：

x = (1 < 2) ? true : false;

我的問題是這是否是“正常”使用，它是否適用於大多數 JavaScript 版本？ 它會在哪里失敗？ 它還有其他不太明顯的用途嗎？

更新——感謝“現實世界”的建議！！！

我使用它作為我的功能：

function updateItem() {
    $this = $(this);
    $this.hasClass("IsChecked") ? removeItem($this) : addItem($this);
}

Answer 1

呵呵，你的問題中有一些非常令人興奮的三元語法用法； 我最喜歡最后一張。。。

x = (1 < 2) ? true : false;

在這里使用三元是完全沒有必要的——你可以簡單地寫

x = (1 < 2);

同樣，三元語句的條件元素始終被評估為布爾值，因此您可以表示：

(IsChecked == true) ? removeItem($this) : addItem($this);

簡單來說：

(IsChecked) ? removeItem($this) : addItem($this);

事實上，我也會刪除IsChecked臨時文件，這會給您留下：

($this.hasClass("IsChecked")) ? removeItem($this) : addItem($this);

至於這是否是可接受的語法，它肯定是！ 這是將四行代碼縮減為一行而不影響可讀性的好方法。 我給你的唯一建議是避免在同一行嵌套多個三元語句（這種方式很瘋狂！）

Answer 2

三元樣式一般用於節省空間。 在語義上，它們是相同的。 我更喜歡使用完整的 if/then/else 語法，因為我不喜歡犧牲可讀性——我是老派，我更喜歡我的大括號。

完整的 if/then/else 格式幾乎用於所有內容。 如果您在每個分支中進入更大的代碼塊，您有一個多分支的 if/else 樹，或者一個長字符串中的多個 else/if，它就會特別受歡迎。

當您根據一個簡單的條件為變量賦值時，或者您正在做出具有非常簡短結果的多個決策時，三元運算符很常見。 您引用的示例實際上沒有意義，因為該表達式將計算為兩個值之一，而無需任何額外的邏輯。

好主意：

this > that ? alert(this) : alert(that);  //nice and short, little loss of meaning

if(expression)  //longer blocks but organized and can be grasped by humans
{
    //35 lines of code here
}
else if (something_else)
{
    //40 more lines here
}
else if (another_one)  /etc, etc
{
    ...

不太好：

this > that ? testFucntion() ? thirdFunction() ? imlost() : whathappuh() : lostinsyntax() : thisisprobablybrokennow() ? //I'm lost in my own (awful) example by now.
//Not complete... or for average humans to read.

if(this != that)  //Ternary would be done by now
{
    x = this;
}
else
}
    x = this + 2;
}

一個非常基本的經驗法則 - 你能理解整件事還是更好地理解？ 三元沒問題。 否則展開。

Answer 3

我也想從我這里補充一些東西。

使用三元運算符調用函數的其他可能語法是：

(condition ? fn1 : fn2)();

如果您必須將相同的參數列表傳遞給兩個函數，這會很方便，因此您只需編寫一次。

(condition ? fn1 : fn2)(arg1, arg2, arg3, arg4, arg5);

您甚至可以使用成員函數名稱使用三元運算符，我個人非常喜歡它以節省空間：

$('.some-element')[showThisElement ? 'addClass' : 'removeClass']('visible');

要么

$('.some-element')[(showThisElement ? 'add' : 'remove') + 'Class']('visible');

另一個例子：

var addToEnd = true; //or false
var list = [1,2,3,4];
list[addToEnd ? 'push' : 'unshift'](5);

Answer 4

您發布的示例沒有什么特別棘手的地方。

在三元運算符中，計算第一個參數（條件），如果結果為true ，則計算並返回第二個參數，否則計算並返回第三個參數。 每個參數都可以是任何有效的代碼塊，包括函數調用。

可以這樣想：

var x = (1 < 2) ? true : false;

也可以寫成：

var x = (1 < 2) ? getTrueValue() : getFalseValue();

這是完全有效的，這些函數可以包含任意代碼，無論是否與返回值有關。 此外，三元運算的結果不必分配給任何東西，就像函數結果不必分配給任何東西一樣：

(1 < 2) ? getTrueValue() : getFalseValue();

現在只需將它們替換為任意函數，您就會得到類似於您的示例的內容：

(1 < 2) ? removeItem($this) : addItem($this);

現在你的最后一個例子真的根本不需要三元，因為它可以這樣寫：

x = (1 < 2);  // x will be set to "true"

Answer 5

如果你要嵌套三元運算符，我相信你會想要做這樣的事情：

   var audience = (countrycode == 'eu') ? 'audienceEU' :
                  (countrycode == 'jp') ? 'audienceJP' :
                  (countrycode == 'cn') ? 'audienceCN' :
                  'audienceUS';

寫/讀比：

var audience = 'audienceUS';
if countrycode == 'eu' {
   audience = 'audienceEU';
} else if countrycode == 'jp' {
   audience = 'audienceJP';
} else if countrycode == 'cn' {
   audience = 'audienceCN';
}

與所有優秀的編程一樣，對於在您完成項目后必須閱讀您的代碼的人來說，空格使一切變得美好。

Answer 6

我知道問題已經回答了。

但讓我在這里補充一點。 這不僅是真假的情況。 見下文：

var val="Do";

Var c= (val == "Do" || val == "Done")
          ? 7
          : 0

這里如果 val 是 Do 或 Done 那么 c 將是 7 否則它將為零。 在這種情況下，c 將為 7。

這其實是這個運營商的另一個角度。