JavaScript değişken tanımı: Virgül ve Noktalı Virgül

Noktalı virgül yerine bir değişken grubunu bildirirken virgül kullanmanın farklılıkları ve / veya avantajları nelerdir?

Örneğin:

var foo = 'bar', bar = 'foo';

karşı

var foo = 'bar';
var bar = 'foo';

varİlk örnekte ilk değişkende anahtar kelimeyi belirtirseniz, tüm değişkenlerde devam edeceğini ve her ikisinin de kapsam açısından aynı sonucu ürettiğini biliyorum. Bu sadece kişisel bir tercih mi yoksa her iki şekilde de yapmanın performans açısından bir faydası var mı?

Performans avantajı yok, sadece kişisel seçim ve tarz meselesi.

İlk versiyon sadece daha kısa ve öz.

Güncelleme:

Kablonun üzerinden geçen veri miktarı açısından, elbette daha azı daha iyidir, ancak vargerçek bir etki görmek için çok sayıda kaldırılmış beyana ihtiyacınız olacaktır .

Küçültme , daha iyi küçültme için ilk örneğin yardımcı olacağı bir şey olarak bahsedilmişti, ancak Daniel Vassallo'nun yorumlarda belirttiği gibi, iyi bir minifier bunu sizin için otomatik olarak yapacak, dolayısıyla bu bakımdan hiçbir etkisi olmayacak.

Crockford ve diğerlerini okuduktan sonra, değişkenlerimi yalnızca virgülle zincirlemeye başladım. Daha sonra, virgülle değişken tanımlarda durmayan Chrome DevTools hata ayıklayıcısından gerçekten rahatsız oldum. Hata ayıklayıcı için, virgülle zincirlenmiş değişken tanımları tek bir ifadedir, çoklu değişken ifadeleri ise hata ayıklayıcının durabileceği çoklu ifadelerdir. Bu nedenle, şundan geri döndüm:

var a = doSomethingA,
    b = doSomethignB,
    c = doSomethingC;

Kime:

var a = doSomethingA;
var b = doSomethignB;
var c = doSomethingC;

Şimdiye kadar, ikinci değişkeni çok daha temiz buluyorum, hata ayıklayıcı sorununu çözme avantajından bahsetmiyorum bile.

Sınırlayıcılar olduğu için "kablo aracılığıyla daha az kod" argümanı ikna edici değildir.

var-per-variableGösterimi tercih ederim :

var a = 2
var b = 3

çünkü diğer comma-instead-of-another-vargösterimde şu üç eksiklik vardır:

1. Bakımı zor
Bu kodu göz önünde bulundurun:

var a = 1,
    b = mogrify(2),
    c = 3

Ama hey, mogrify ne yapar? Öğrenmek için b yazalım:

var a = 1,
    b = mogrify(2),
    console.log(b)
    c = 3

bir şeyleri kırar

2. Okumak zor

Hattın başlangıcındaki var, yeni bir değişkenin başlatılacağını açıkça belirtir.

var get_all_unicorn_promise = db.get_all_unicorns((unicorn) => {
        unicorn.legs.map((leg) => {
            leg.log('yes')
        })
    }).sort(),
    c = 3

Orada ne halt c = 3ediyorsun?

3. Tutarlı değil

Bunu düşün:

var a = 1,
    b = 2,
    c = 3

İle var-per-variableher beyanı aynı yapıyı takip edin. İle comma-instead-of-another-varbirinci değişkenin diğerlerinden daha farklı bir şekilde ilan edilir. Örneğin, ilk değişkeni bir döngü içine taşımaya karar verirseniz, bildirimlerin ortasına var eklemeniz gerekir.

Tercih dışında, kayda değer projelerin çoğu var-per-variablenotasyonu kullanıyor gibi görünüyor

Diğer cevap verenlerle bunun esas olarak kişisel bir tarz meselesi olduğu konusunda hemfikirim. Ancak tartışmaya "Yetkili" bir görüş getirmek için, Douglas Crockford , popüler JSLint aracının web sitesinde şöyle diyor :

Ancak JavaScript'in blok kapsamı olmadığından, bir işlevin tüm değişkenlerini işlevin üstünde belirtmek daha akıllıca olacaktır. İşlev başına tek bir var ifadesinin kullanılması önerilir. Bu onevarseçenek ile güçlendirilebilir .

Diğerlerinin de belirttiği gibi, bu bir stil tercihidir. JSLint , size varişlev başına yalnızca bir tane olmasını söyleyebilir ("İyi Parçalar" kullanıyorsanız). Bu nedenle, kodunuzu kontrol etmek için JSLint kullanıyorsanız (kötü bir fikir değil, IMHO), ilk formatı ikincisinden daha fazla kullanırsınız.

Öte yandan, aynı yazar Douglas Crockford , kodlama kurallarında her değişkeni kendi satırına koymasını söylüyor . Bu nedenle var, kullanıyorsanız JSLint'te "İşlev başına hepsi bir tane " onay kutusunun işaretini kaldırmak isteyebilirsiniz . ;-)

Gözle görülür bir fark olduğunu sanmıyorum, bana göre sadece kişisel tercih.

Birden fazla varyasyon bildirimine sahip olmaktan nefret ediyorum, bu yüzden genellikle:

var 
   one
  ,two
  ,three
  ,four
;

Daha kısa ve tartışmalı bir şekilde daha okunabilir olduğundan, varbakılacak gürültü yok .

Bunun için herhangi bir başvuruları görmüyorum beri burada JavaScript için altta yatan spec ECMA-262 şartname, bir bağlantıdır. Bu sayfadaki dilbilgisi şöyle diyor:

12.2 Variable Statement

Syntax

  VariableStatement :
    var VariableDeclarationList ;

  VariableDeclarationList :
    VariableDeclaration
    VariableDeclarationList , VariableDeclaration

  VariableDeclarationListNoIn :
    VariableDeclarationNoIn
    VariableDeclarationListNoIn , VariableDeclarationNoIn

  VariableDeclaration :
    Identifier Initialiseropt

  VariableDeclarationNoIn :
    Identifier InitialiserNoInopt

  Initialiser :
    = AssignmentExpression
  InitialiserNoIn :
    = AssignmentExpressionNoIn

Bundan çıkarabileceğiniz şey virgül kullanmaktır ya da önemli değil. Her iki durumda da, bir olarak ayrıştırılır VariableDeclarationve tamamen aynı şekilde ele alınır. Komut dosyası motorunun iki bildirimi nasıl ele aldığı arasında hiçbir fark olmamalıdır. Tek fark, diğer cevaplarda daha önce bahsedilenler olacaktır - daha fazla yer tasarrufu VariableDeclarationsve komut dosyası derlendiğinde hepsini bulmak için grameri uygulamak için gereken süre açısından pratik olarak ölçülemeyen farklılıklar .

İlki birkaç karakter kaydeder - bu nedenle JS dosya boyutu ve dolayısıyla bant genişliği tüketimi açısından çok küçük bir tasarruf vardır. Bunun farkedilebilir hale geldiği tek zaman aşırı durumlarda olacaktır.

İkinci versiyonu tercih ederim (her birinin kendine ait var). Sanırım bunun sebebi benim C ++ geçmişine sahip olmam. C ++ 'da, ilk örneğinizde yaptığınız gibi değişkenler bildirebilirsiniz, ancak bu hoş karşılanmaz (bu şekilde işaretçiler oluşturmaya çalışırken kolayca hatalara yol açar).

Javascript'inizi küçültüyorsanız, oldukça büyük bir fayda var:

var one, two, three, four;

olur

var a, b, c, d;

Buna karşılık

var one;
var two;
var three;
var four;

olur

var a;
var b;
var c;
var d;

Bu var, zamanla toplanabilecek ek bir üç örnek .

"Ayrı Bir Liste" makale dizisi "Daha İyi Javascript Küçültme" Bölüm 1 ve Bölüm 2'ye bakın