Deklarowanie wielu zmiennych w JavaScript

Oprócz możliwości utrzymania, pierwszy sposób eliminuje możliwość tworzenia zmiennych globalnych przypadkowych:

(function () {
var variable1 = "Hello World!" // semicolon is missed out accidently
var variable2 = "Testing..."; // still a local variable
var variable3 = 42;
}());

Podczas gdy druga droga jest mniej wyrozumiała:

(function () {
var variable1 = "Hello World!" // comma is missed out accidently
    variable2 = "Testing...", // becomes a global variable
    variable3 = 42; // a global variable as well
}());

Powszechnie używa się jednej deklaracji var Na Zakres dla organizacji. Sposób, w jaki wszystkie "zakresy" podążają za podobnym wzorcem, czyniąc kod bardziej czytelnym. Dodatkowo silnik i tak" wciąga " je wszystkie do góry. Więc trzymanie deklaracji razem naśladuje to, co faktycznie się wydarzy.

Jest o wiele bardziej czytelny, gdy robi to w ten sposób:

var hey = 23;
var hi = 3;
var howdy 4;

Ale zajmuje mniej miejsca i linii kodu w ten sposób:

var hey=23,hi=3,howdy=4;

To tylko kwestia osobistych preferencji. Nie ma różnicy między tymi dwoma sposobami, poza kilkoma bajtami zapisanymi w drugiej postaci, jeśli usuniesz białą spację.

var variable1 = "Hello World!";
var variable2 = "Testing...";
var variable3 = 42;

Jest bardziej czytelny niż:

var variable1 = "Hello World!",
    variable2 = "Testing...",
    variable3 = 42;

Maybe like this

var variable1 = "hello world"
, variable2 = 2
, variable3 = "how are you doing"
, variable4 = 42;

Z wyjątkiem zmiany pierwszej lub ostatniej zmiennej jest łatwa w utrzymaniu i odczycie.

Moje jedyne, ale niezbędne użycie przecinka jest w pętli for:

for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}

Poszedłem tutaj, aby sprawdzić, czy to jest OK w JavaScript.

Nawet widząc to działa, pozostaje pytanie, czy n jest lokalne dla funkcji.

To sprawdza, N jest lokalne:

a=[3,5,7,11];
(function l () { for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}}) ();
console.log(typeof n == "undefined" ?
  "as expected, n was local" : "oops, n was global");

Przez chwilę nie byłem pewien, przełączanie między językami.

ECMAScript6 destrukcyjne przypisanie które działa całkiem nieźle:

[a, b] = [1, 2] a będzie równa 1 i {[2] } będzie równa 2.

Chociaż oba są poprawne, użycie drugiego zniechęca niedoświadczonych programistów do umieszczania instrukcji var wszędzie i powodowania problemów z podnoszeniem. Jeśli w górnej części funkcji jest tylko jeden var dla danej funkcji, wtedy łatwiej jest debugować kod jako całość. Może to oznaczać, że linie, w których deklarowane są zmienne, nie są tak jawne, jak niektórzy mogą sobie tego życzyć.

Uważam, że warto, jeśli oznacza to odstawienie dewelopera od porzucenia " var " w dowolnym miejscu, w którym się czuje na przykład.

Ludzie mogą narzekać na JSLint, ja również, ale wiele z nich jest nastawionych nie na naprawianie problemów z językiem, ale na korygowanie złych nawyków programistów i tym samym zapobieganie problemom w kodzie, który piszą. Dlatego:

" w językach z zakresem blokowym zwykle zaleca się zadeklarowanie zmiennych w miejscu pierwszego użycia. Ale ponieważ JavaScript nie ma zakresu blokowego, rozsądniej jest zadeklarować wszystkie zmienne funkcji na górze funkcja. Zaleca się użycie pojedynczej instrukcji var dla każdej funkcji."- http://www.jslint.com/lint.html#scope

Myślę, że to kwestia osobistych preferencji. Wolę to zrobić w następujący sposób:

   var /* Vars */
            me = this, that = scope,
            temp, tempUri, tempUrl,
            videoId = getQueryString()["id"],
            host = location.protocol + '//' + location.host,
            baseUrl = "localhost",
            str = "Visit W3Schools",
            n = str.search(/w3schools/i),
            x = 5,
            y = 6,
            z = x + y
   /* End Vars */;

Użyj ES6 przypisanie destrukcji : rozpakuje wartości z tablic lub właściwości z obiektów do odrębnych zmiennych.

let [variable1 , variable2, variable3] = 
["Hello World!", "Testing...", 42];

console.log(variable1); // Hello World!
console.log(variable2); // Testing...
console.log(variable3); // 42

Pojęcie "spójność nad sprzężeniem" może być stosowane bardziej ogólnie niż tylko obiekty / Moduły / funkcje. Może również służyć w tej sytuacji:

Drugi przykład, który zasugerował OP, połączył wszystkie zmienne w jedną instrukcję, co uniemożliwia wzięcie jednej z linii i przeniesienie jej w inne miejsce bez łamania rzeczy (high coupling). Pierwszy podany przez niego przykład sprawia, że przypisania zmiennych są niezależne od siebie (niskie sprzężenie).

" low coupling is często znak dobrze zorganizowanego systemu komputerowego i dobrego projektu, a w połączeniu z wysoką spójnością, wspiera ogólne cele wysokiej czytelności i łatwości konserwacji."

Http://en.wikipedia.org/wiki/Coupling_ (computer_programming)

Więc wybierz pierwszy.

Innym powodem unikania wersji pojedynczej instrukcji (single var) jest debugowanie. Jeśli w linii przypisania zostanie wyrzucony wyjątek, ślad stosu pokazuje tylko jedną linię.

Jeśli miałeś 10 zmiennych zdefiniowanych za pomocą składni przecinka, nie możesz bezpośrednio wiedzieć, która z nich była winowajcą.

Indywidualna wersja instrukcji nie cierpi z powodu tej dwuznaczności.

Uważam, że zanim zaczęliśmy używać ES6, podejście z pojedynczą deklaracją var nie było ani dobre, ani złe (w przypadku, gdy masz lintery i 'use strict'. To było naprawdę preferencje smakowe. Ale teraz wszystko się zmieniło. Są moje myśli za deklaracją wielowierszową:

1. Teraz mamy dwa nowe rodzaje zmiennych i var stały się przestarzałe. Dobrą praktyką jest używanie const wszędzie, dopóki naprawdę nie potrzebujesz let. Więc dość często Twój kod będzie zawierał deklaracje zmiennych z assigment w środku kodu, a ze względu na zasięg bloków dość często będziesz przenosić zmienne między blokami w przypadku małych zmian. Myślę, że bardziej wygodne jest robienie tego z deklaracjami wielowierszowymi.

2. Składnia ES6 stała się bardziej zróżnicowana, mamy destruktory, ciągi szablonów, funkcje strzałek i opcjonalne assigmenty. Gdy mocno używasz wszystkich tych funkcji z pojedynczymi deklaracjami var, szkodzi to czytelności.

Myślę, że pierwszy sposób (multiple vars) jest najlepszy, ponieważ można w przeciwnym razie skończyć z tym (z aplikacji, która używa Knockout), co jest moim zdaniem trudne do odczytania:

    var categories = ko.observableArray(),
        keywordFilter = ko.observableArray(),
        omniFilter = ko.observable('').extend({ throttle: 300 }),
        filteredCategories = ko.computed(function () {
            var underlyingArray = categories();
            return ko.utils.arrayFilter(underlyingArray, function (n) {
                return n.FilteredSportCount() > 0;
            });
        }),
        favoriteSports = ko.computed(function () {
            var sports = ko.observableArray();
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        sports.push(a);
                    }
                });
            });
            return sports;
        }),
        toggleFavorite = function (sport, userId) {
            var isFavorite = sport.IsFavorite();

            var url = setfavouritesurl;

            var data = {
                userId: userId,
                sportId: sport.Id(),
                isFavourite: !isFavorite
            };

            var callback = function () {
                sport.IsFavorite(!isFavorite);
            };

            jQuery.support.cors = true;
            jQuery.ajax({
                url: url,
                type: "GET",
                data: data,
                success: callback
            });
        },
        hasfavoriteSports = ko.computed(function () {
            var result = false;
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        result = true;
                    }
                });
            });
            return result;
        });