Deklarieren mehrerer Variablen in JavaScript

In JavaScript können mehrere Variablen wie folgt deklariert werden:

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

... oder so:

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

Ist eine Methode besser / schneller als die andere?

Der erste Weg ist einfacher zu warten. Jede Deklaration ist eine einzelne Anweisung in einer einzelnen Zeile, sodass Sie die Deklarationen einfach hinzufügen, entfernen und neu anordnen können.

Beim zweiten Weg ist es ärgerlich, die erste oder letzte Deklaration zu entfernen, da sie das varSchlüsselwort und das Semikolon enthalten. Und jedes Mal, wenn Sie eine neue Deklaration hinzufügen, müssen Sie das Semikolon in der alten Zeile in ein Komma ändern.

Neben der Wartbarkeit schließt der erste Weg die Möglichkeit der Erstellung globaler Unfallvariablen aus:

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

Während der zweite Weg weniger verzeihend ist:

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

Es ist üblich, eine varAnweisung pro Bereich für die Organisation zu verwenden. Die Art und Weise, wie alle "Bereiche" einem ähnlichen Muster folgen, macht den Code besser lesbar. Außerdem "hebt" der Motor sie sowieso alle nach oben. Wenn Sie also Ihre Erklärungen zusammenhalten, ahmen Sie nach, was tatsächlich genauer passieren wird.

Es ist viel besser lesbar, wenn Sie es so machen:

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

Benötigt aber weniger Platz und Codezeilen auf diese Weise:

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

Es kann ideal sein, um Platz zu sparen, aber lassen Sie JavaScript-Kompressoren dies für Sie erledigen.

Vielleicht so

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

Außer beim Ändern der ersten oder letzten Variablen ist es einfach zu pflegen und zu lesen.

Es ist nur eine Frage der persönlichen Präferenz. Es gibt keinen Unterschied zwischen diesen beiden Möglichkeiten, abgesehen von einigen Bytes, die mit dem zweiten Formular gespeichert wurden, wenn Sie den Leerraum entfernen.

ECMAScript6 hat eine Destrukturierungszuweisung eingeführt, die ziemlich gut funktioniert:

[a, b] = [1, 2] awird gleich 1und bwird gleich 2.

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

ist besser lesbar als:

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

Aber sie machen das Gleiche.

Verwenden Sie ES6 Destrukturierung Zuordnung : Es wird auspacken Werte von Arrays oder Eigenschaften von Objekten in verschiedene Variablen.

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

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

Meine einzige, aber wesentliche Verwendung für Komma ist eine for-Schleife:

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

Ich habe hier nachgeschlagen, ob dies in JavaScript in Ordnung ist.

Selbst als es funktionierte, blieb die Frage offen, ob n für die Funktion lokal ist.

Dies überprüft, ob n lokal ist:

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

Für einen Moment war ich mir nicht sicher, ob ich zwischen den Sprachen wechseln sollte.

Obwohl beide gültig sind, hält die Verwendung der zweiten Option unerfahrene Entwickler davon ab, überall var-Anweisungen zu platzieren und Probleme beim Heben zu verursachen. Wenn es oben in der Funktion nur eine Variable pro Funktion gibt, ist es einfacher, den Code als Ganzes zu debuggen. Dies kann bedeuten, dass die Zeilen, in denen die Variablen deklariert sind, nicht so explizit sind, wie manche möchten.

Ich bin der Meinung, dass sich ein Kompromiss lohnt, wenn es bedeutet, einen Entwickler davon abzuhalten, "var" überall dort abzulegen, wo er Lust hat.

Die Leute mögen sich auch über JSLint beschweren, aber viele davon zielen nicht darauf ab, Probleme mit der Sprache zu beheben, sondern schlechte Gewohnheiten der Codierer zu korrigieren und damit Probleme im Code, den sie schreiben, zu verhindern. Deshalb:

"In Sprachen mit Blockbereich wird normalerweise empfohlen, Variablen an der Stelle der ersten Verwendung zu deklarieren. Da JavaScript jedoch keinen Blockbereich hat, ist es sinnvoller, alle Variablen einer Funktion oben in der Funktion zu deklarieren empfohlen, eine einzelne var-Anweisung pro Funktion zu verwenden. " - http://www.jslint.com/lint.html#scope

Ich denke, es ist eine Frage der persönlichen Präferenz. Ich mache es lieber so:

   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 */;

Ein weiterer Grund, die Single-Statement-Version (Single- Var ) zu vermeiden, ist das Debuggen. Wenn in einer der Zuweisungszeilen eine Ausnahme ausgelöst wird, zeigt die Stapelverfolgung nur die eine Zeile an.

Wenn Sie 10 Variablen mit der Kommasyntax definiert haben, können Sie nicht direkt wissen, welche der Schuldige war.

Die Version mit einzelnen Anweisungen leidet nicht unter dieser Mehrdeutigkeit.

Das Konzept "Kohäsion über Kopplung" kann allgemeiner angewendet werden als nur Objekte / Module / Funktionen. Es kann auch in dieser Situation dienen:

Das zweite vom OP vorgeschlagene Beispiel hat alle Variablen in dieselbe Anweisung eingekoppelt, was es unmöglich macht, eine der Zeilen zu nehmen und an einen anderen Ort zu verschieben, ohne etwas zu beschädigen (hohe Kopplung). Das erste Beispiel, das er gegeben hat, macht die Variablenzuordnungen unabhängig voneinander (niedrige Kopplung).

"Eine geringe Kopplung ist oft ein Zeichen für ein gut strukturiertes Computersystem und ein gutes Design und unterstützt in Kombination mit einer hohen Kohäsion die allgemeinen Ziele einer hohen Lesbarkeit und Wartbarkeit."

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

Wählen Sie also den ersten.

Ein alter Beitrag, ich weiß, aber um ein kleines Detail der Perspektive für andere Googler hinzuzufügen:

Das Problem der Wartbarkeit kann mit ein wenig Formatierung wie dieser ziemlich leicht überwunden werden.

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

Ich verwende diese Formatierung ausschließlich aus persönlichen Gründen. Ich überspringe dieses Format natürlich für einzelne Deklarationen oder wo es einfach die Werke zusammenfasst.

Ich glaube, bevor wir mit ES6 angefangen haben, war der Ansatz mit einer einzelnen Var-Deklaration weder gut noch schlecht (falls Sie Linters haben und 'use strict'. Es war wirklich eine Geschmackspräferenz. Aber jetzt haben sich die Dinge für mich geändert. Es gibt meine Gedanken zugunsten einer mehrzeiligen Deklaration ::

1. Jetzt haben wir zwei neue Arten von Variablen und sind varveraltet. Es ist eine gute Praxis, constüberall zu verwenden , bis Sie wirklich brauchen let. Daher enthält Ihr Code häufig Variablendeklarationen mit Zuweisung in der Mitte des Codes, und aufgrund des Blockumfangs verschieben Sie bei kleinen Änderungen häufig Variablen zwischen Blöcken. Ich denke, dass es bequemer ist, dies mit mehrzeiligen Erklärungen zu tun.

2. Die ES6-Syntax wurde vielfältiger, wir erhielten Destruktoren, Vorlagenzeichenfolgen, Pfeilfunktionen und optionale Zuweisungen. Wenn Sie all diese Funktionen häufig mit einzelnen var-Deklarationen verwenden, beeinträchtigt dies die Lesbarkeit.

Ich denke, der erste Weg (mehrere Vars) ist der beste, da Sie sonst damit enden können (aus einer Anwendung, die Knockout verwendet), was meiner Meinung nach schwer zu lesen ist:

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