İşlevlerle JavaScript üçlü operatör örneği


91

JQuery 1.7.1 kullanıyorum

Basit if / else ifadelerini değiştirmek için JavaScript üçlü operatörünü kullanmaya yeni başlıyorum. Birçok yerde çok başarılı oldum. Başka bir şeyi başarılı bir şekilde çalıştırdığımda, olmayacağından emin olduğumda şaşırdım, ama yine de denedim.

İşte orijinal ifade:

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

Üçlü operatörü kullanan aynı işlev şu şekildedir:

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

Şaşırdım çünkü kullanıldığını gördüğüm tüm örnekler sadece böyle değişkenler ayarlıyordu:

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

Sorum, bunun "normal" kullanım olup olmadığı ve JavaScript’in çoğu sürümünde çalışacak mı? Nerede başarısız olacak? Bunun daha az belirgin kullanımları var mı?

GÜNCELLEME - "Gerçek dünya" tavsiyesi için teşekkürler !!!

Bunu işlevim olarak kullanıyorum:

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

Bu normaldir ve gayet iyi çalışacaktır .. Genel olarak, üçlü operatörleri kullanırken okunabilirlik zordur, ancak sizin durumunuzda gayet iyi görünüyor.
Selvakumar Arumugam

1
Hmm .... her ikisi de aynı argümanları kabul ettiği için bunu da yapabilirsiniz (IsChecked ? removeItem : addItem)($this). Bununla birlikte, sorunuza cevap vermek gerekirse, evet bu normaldir ve ihtiyaç duyulan bir durumda sürdürülebilirlik veya okunabilirlikten uzaklaşmadıkları sürece üçlü operatörleri kullanmanın yanlış bir tarafı yoktur. jsfiddle.net/vsB3f
Kevin B

if($this.hasClass("IsChecked")) removeItem($this); else addItem($this)doğru yoldur. Üçlü operatör, bunun gibi durumlar için değil, bunun gibi şeyler içindir foo(isChecked ? 'bar' : meow());(yani, o zaman / else bloklarında yaptığınız her şeyin "geri dönüş değerini"
önemsediğinizde

1
Örneğinizde, bunun lehine ilk satırı atlayın: $(this).hasClass("IsChecked") ? removeItem($this) : addItem($this); Kodunuzu tek satırda olduğu gibi anlayabiliyorum, böylece benim genel kuralıma uyuyor (aşağıdaki gönderiye bakın). Benim için çalışıyor.
Surreal Dreams

Yanıtlar:


190

Heh, sorunuzda üçlü sözdiziminin oldukça heyecan verici kullanımları var; Sonuncusunu en çok seviyorum ...

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

Üçlü terimin burada kullanılması tamamen gereksizdir - basitçe yazabilirsiniz

x = (1 < 2);

Benzer şekilde, üçlü bir ifadenin koşul öğesi her zaman bir Boolean değeri olarak değerlendirilir ve bu nedenle şunları ifade edebilirsiniz:

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

Basitçe:

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

Aslında, IsCheckedgeçici olanı da kaldırırdım ki bu sizi şunlarla bırakır:

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

Bunun kabul edilebilir sözdizimi olup olmadığına gelince, kesinlikle öyle! Okunabilirliği etkilemeden dört satırlık kodu tek satıra indirmenin harika bir yoludur. Size vereceğim tek tavsiye, birden fazla üçlü ifadeyi aynı satıra yerleştirmekten kaçınmanızdır (bu şekilde çılgınlık olur!)


sınıf adlarında büyük harf kullanmaktan kaçınmak isteyebileceğinizi unutmayın (IsChecked is-checked edilir) stackoverflow.com/questions/1547986/…
Adrien Be

JS birinci sınıf işlevlere sahiptir:($this.hasClass("isChecked") ? removeItem : addItem)($this)
ClojureÇoğunlukla

22

Üçlü stil genellikle yerden tasarruf etmek için kullanılır. Anlamsal olarak aynıdırlar. Tam if / then / else sözdizimiyle gitmeyi tercih ederim çünkü okunabilirliği feda etmekten hoşlanmıyorum - ben eski kafalıyım ve diş tellerimi tercih ederim.

Tam if / then / else formatı hemen hemen her şey için kullanılır. Her dalda daha büyük kod bloklarına girerseniz, çok dallı if / else ağacınız veya uzun bir dizede birden fazla else / ifs varsa özellikle popülerdir.

Üçlü operatör, basit bir koşula dayalı olarak bir değişkene bir değer atadığınızda veya çok kısa sonuçlarla birden fazla karar verdiğinizde yaygındır. Alıntı yaptığınız örnek aslında bir anlam ifade etmiyor, çünkü ifade fazladan mantık olmadan iki değerden birini değerlendirecektir.

İyi fikirler:

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
{
    ...

Daha az iyi:

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

Bir gerçekten temel önemli kural - siz de ya da daha iyi bir satırda şeyi anlayabilir? Üçlü tamam. Aksi takdirde genişletin.


8

Ayrıca benden bir şeyler eklemek isterim.

Üçlü operatörle işlevleri çağırmak için diğer olası sözdizimi şöyle olacaktır:

(condition ? fn1 : fn2)();

Aynı parametre listesini her iki işleve de iletmeniz gerekiyorsa kullanışlı olabilir, bu nedenle bunları yalnızca bir kez yazmanız gerekir.

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

Üçlü operatörü, kişisel olarak yer kazanmak için çok sevdiğim üye işlev adlarıyla bile kullanabilirsiniz:

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

veya

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

Başka bir örnek:

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

7

Gönderdiğiniz örnekte özellikle aldatıcı hiçbir şey yok.

Üçlü bir operatörde, ilk bağımsız değişken (koşullu) değerlendirilir ve sonuç ise true, ikinci bağımsız değişken değerlendirilir ve döndürülür, aksi takdirde üçüncü bağımsız değişken değerlendirilir ve döndürülür. Bu bağımsız değişkenlerin her biri, işlev çağrıları dahil herhangi bir geçerli kod bloğu olabilir.

Bu şekilde düşün:

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

Şu şekilde de yazılabilir:

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

Bu tamamen geçerlidir ve bu işlevler, bir değer döndürmeyle ilgili olsun ya da olmasın, herhangi bir keyfi kod içerebilir. Ek olarak, işlev sonuçlarının hiçbir şeye atanması gerekmediği gibi, üçlü işlemin sonuçlarının da hiçbir şeye atanması gerekmez:

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

Şimdi bunları herhangi bir gelişigüzel işlevle değiştirdiğinizde, örneğinize benzer bir şey kalır:

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

Şimdi son örneğiniz şu şekilde yazılabileceği için gerçekten bir üçlü değere ihtiyaç duymuyor:

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

6

Üçlü operatörleri yerleştirecekseniz, buna benzer bir şey yapmak isteyeceğinize inanıyorum:

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

Yazmak / okumak şunlardan çok daha etkilidir:

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

Tüm iyi programlamalarda olduğu gibi, boşluk, projeyi bitirdikten sonra kodunuzu okumak zorunda olan insanlar için her şeyi güzelleştirir.


6
İç içe geçmiş üçlü kodun okunması ve hata ayıklaması daha kolay olduğu hakkındaki yukarıdaki yorumunuza kesinlikle katılmıyorum. Kişisel olarak, başka bir bloğun bir arama tablosu veya bir anahtar ifadesiyle değiştirilip değiştirilmediğini görmeyi tercih ederim .
JonnyReeves

@JonnyReeves kabul etti - genellikle iç içe geçmiş üçlü sözdizimi en iyi farklı koşulları kontrol ederken kullanılır (örneğin sayıların
modulosu

2

Sorunun zaten cevaplandığını biliyorum.

Ama buraya bir nokta eklememe izin verin. Bu sadece doğru veya yanlış durum değildir. Aşağıya bakınız:

var val="Do";

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

Burada val Do veya Done ise c 7 olacaktır, aksi takdirde sıfır olacaktır. Bu durumda c 7 olacaktır.

Bu aslında bu operatörün başka bir perspektifi.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.