Пример тернарного оператора 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);
}
6 87

6 ответов:

Хех, в вашем вопросе есть несколько довольно интересных применений тернарного синтаксиса; мне больше нравится последний...

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

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

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

полный формат if / then / else используется практически для всего. Это особенно популярно, если вы попадаете в большие блоки кода в каждой ветви, у вас есть muti-разветвленное дерево 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 основные эмпирическое правило - вы можете понять все это, а также или лучше на одна строчка? Троичный-это нормально. В противном случае разверните его.

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

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

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

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

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

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

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

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

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

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

var val="Do";

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

здесь, если val Do или Done, то c будет 7, иначе он будет равен нулю. В этом случае c будет 7.

это фактически другая перспектива этого оператора.