Пример тройного оператора JavaScript с функциями

Я использую 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);
}

Ответ 1

Хе, в вашем вопросе есть несколько довольно захватывающих применений тройного синтаксиса; Мне нравится последний лучший...

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

Использование тройной здесь совершенно нецелесообразно - вы можете просто написать

x = (1 < 2);

Аналогично, элемент условия тернарного оператора всегда оценивается как логическое значение, поэтому вы можете выразить:

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

Просто как:

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

Infact, я бы также удалил временный тэг IsChecked, который оставит вас с:

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

Что касается того, что это приемлемый синтаксис, это обязательно! Это отличный способ сократить четыре строки кода в один, не влияя на читаемость. Единственное слово совета, которое я бы вам дал, - это избегать вложения нескольких тернарных утверждений в одну строку (таким образом, это безумие!)

Ответ 2

Тройной стиль обычно используется для экономии места. Семантически они идентичны. Я предпочитаю использовать полный синтаксис if/then/else, потому что я не люблю жертвовать читабельностью - я старая школа, и я предпочитаю свои фигурные скобки.

Полный формат if/then/else используется для почти всего. Это особенно популярно, если вы попадаете в более крупные блоки кода в каждой ветки, у вас есть мути-разветвленное дерево if/else или несколько else/ifs в длинной строке.

Тернарный оператор распространен, когда вы назначаете значение переменной на основе простого условия или принимаете несколько решений с очень короткими результатами. Пример, который вы цитируете, на самом деле не имеет смысла, потому что выражение будет оценивать одно из двух значений без дополнительной логики.

Хорошие идеи:

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;
}

A действительно основное эмпирическое правило - можете ли вы понять все это как хорошо или лучше на одной линии? Тернар в порядке. В противном случае расширьте его.

Ответ 3

В примере, который вы опубликовали, нет ничего особенно сложного.

В тернарном операторе вычисляется первый аргумент (условный), и если результат 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"

Ответ 4

Если вы собираетесь вставлять тернарные операторы, я считаю, что вы хотите сделать что-то вроде этого:

   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';
}

Как и при любом хорошем программировании, пробелы делают все хорошо для людей, которые должны прочитать ваш код после того, как вы закончите с проектом.

Ответ 5

Я также хотел бы кое-что добавить от меня.

Другим возможным синтаксисом для вызова функций с тернарным оператором будет:

(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);

Ответ 6

Я знаю, что вопрос уже ответил.

Но позвольте мне добавить один пункт здесь. Это не только случай истинного или ложного. См. Ниже:

var val="Do";

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

Здесь, если val - Do или Done, тогда c будет 7 else, это будет ноль. В этом случае c будет 7.

Это на самом деле другая перспектива этого оператора.