Deklarowanie wielu zmiennych w JavaScript

W JavaScript można zadeklarować wiele zmiennych takich jak to:

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

... lub tak:

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

Czy jedna metoda jest lepsza / szybsza od drugiej?

Pierwszy sposób jest łatwiejszy w utrzymaniu. Każda deklaracja jest pojedynczą instrukcją w jednym wierszu, dzięki czemu można łatwo dodawać, usuwać i zmieniać kolejność deklaracji.

W przypadku drugiego sposobu denerwujące jest usunięcie pierwszej lub ostatniej deklaracji, ponieważ zawierają one varsłowo kluczowe i średnik. I za każdym razem, gdy dodajesz nową deklarację, musisz zmienić średnik w starej linii na przecinek.

Oprócz łatwości konserwacji, pierwszy sposób eliminuje możliwość tworzenia globalnych zmiennych wypadkowych:

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

Podczas gdy drugi sposób jest mniej wybaczający:

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

W organizacji często stosuje się jedno varzdanie na zakres . Sposób, w jaki wszystkie „zakresy” mają podobny wzór, dzięki czemu kod jest bardziej czytelny. Dodatkowo silnik i tak „podnosi” je wszystkie na szczyt. Tak więc utrzymywanie razem swoich deklaracji naśladuje to, co faktycznie stanie się bliżej.

Robiąc to w ten sposób, jest o wiele bardziej czytelny:

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

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

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

Może być idealny do oszczędzania miejsca, ale pozwól, aby kompresory JavaScript obsługiwały go za Ciebie.

Może tak

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

Z wyjątkiem zmiany pierwszej lub ostatniej zmiennej, jest łatwa do utrzymania i odczytu.

To tylko kwestia osobistych preferencji. Nie ma różnicy między tymi dwoma sposobami, poza kilkoma bajtami zapisanymi w drugim formularzu, jeśli usuniesz białe znaki.

ECMAScript6 introducted destructuring assignment który działa całkiem ładny:

[a, b] = [1, 2] abędzie równy 1i bbędzie równy 2.

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

jest bardziej czytelny niż:

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

Ale robią to samo.

Użyj przypisania Destrukturyzacji ES6 : 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

Moim jedynym, ale niezbędnym zastosowaniem przecinka jest pętla for:

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

Poszedłem tutaj, aby sprawdzić, czy w JavaScript jest to w porządku.

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

To weryfikuje, 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łączając się między językami.

Chociaż oba są poprawne, użycie drugiego odradza niedoświadczonym programistom umieszczanie instrukcji var w dowolnym miejscu i powodowanie problemów z podnoszeniem. Jeśli na górze funkcji znajduje się tylko jedna zmienna na funkcję, łatwiej jest debugować kod jako całość. Może to oznaczać, że linie, w których zmienne są zadeklarowane, nie są tak wyraźne, jak niektórym się to spodoba.

Uważam, że kompromis jest tego wart, jeśli oznacza to oderwanie programisty od porzucenia „var” w dowolnym miejscu.

Ludzie mogą narzekać na JSLint, ja też, ale wiele z nich jest nastawionych nie na rozwiązywanie problemów z językiem, ale na korygowanie złych nawyków programistów, a tym samym zapobieganie problemom w pisanym kodzie. W związku z tym:

„W językach z zakresem blokowym zwykle zaleca się deklarowanie zmiennych w miejscu pierwszego użycia. Ponieważ JavaScript nie ma zakresu blokowego, mądrzej jest zadeklarować wszystkie zmienne funkcji na górze funkcji. zaleca się stosowanie jednej funkcji 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 */;

Kolejnym powodem, dla którego należy unikać wersji z pojedynczą instrukcją (single var ), jest debugowanie. Jeśli jest wyjątek w dowolny z linii przypisania ślad stosu pokazuje tylko jedną linię.

Jeśli zdefiniowano 10 zmiennych za pomocą składni przecinków, nie można bezpośrednio wiedzieć, który z nich był winowajcą.

Indywidualna wersja oświadczenia nie cierpi z powodu tej dwuznaczności.

Pojęcie „spójności 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 tę samą instrukcję, co uniemożliwia pobranie jednej z linii i przeniesienie jej gdzie indziej bez zerwania rzeczy (wysokie sprzężenie). Pierwszy podany przez niego przykład uniezależnia przypisania zmiennych (niskie sprzężenie).

„Niskie sprzężenie jest często oznaką dobrze skonstruowanego 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.

Stary post, wiem, ale aby dodać mały szczegół perspektywy dla innych pracowników Google:

Kwestię łatwości konserwacji można dość łatwo rozwiązać za pomocą niewielkiego formatowania.

let
  my_var1 = 'foo',
  my_var2 = 'bar',
  my_var3 = 'baz'
;

Używam tego formatowania wyłącznie w celu osobistych preferencji. Oczywiście pomijam ten format w przypadku pojedynczych deklaracji lub tam, gdzie po prostu działa.

Wierzę, że zanim zaczęliśmy używać ES6, podejście z deklaracją pojedynczego var nie było ani dobre, ani złe (w przypadku, gdy masz kłaczki i 'use strict'. To było naprawdę preferencje smakowe. Ale teraz wszystko się zmieniło. Są moje przemyślenia na korzyść deklaracji wielowierszowej :

1. Teraz mamy dwa nowe rodzaje zmiennych i varstało się nieaktualne. Dobrą praktyką jest stosowanie constwszędzie, dopóki naprawdę nie potrzebujesz let. Tak często twój kod będzie zawierał deklaracje zmiennych z przypisaniem w środku kodu, a ze względu na zakres bloków dość często przenosisz zmienne między blokami w przypadku niewielkich zmian. Myślę, że bardziej przekonujące jest robienie tego z deklaracjami wieloliniowymi.

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

Myślę, że najlepszy jest pierwszy sposób (wiele zmiennych), ponieważ w przeciwnym razie możesz skończyć z tym (z aplikacji korzystającej z Knockout), co moim zdaniem jest 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;
        });