Deklarieren von mehreren Variablen in JavaScript

Question

In JavaScript ist es möglich, mehrere Variablen wie folgt zu erklären:

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

... oder wie folgt aus:

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

Ist eine Methode besser / schneller als die anderen?

Answer 1

Der erste Weg ist leichter zu pflegen. Jede Erklärung ist eine einzelne Anweisung auf einer einzigen Zeile, so können Sie leicht hinzufügen, entfernen und neu anordnen, die Erklärungen.

Mit der zweiten Art und Weise, ist es ärgerlich, die erste oder letzte Erklärung zu entfernen, weil sie das var Schlüsselwort und Semikolon enthalten. Und jedes Mal, wenn Sie eine neue Erklärung hinzufügen, müssen Sie ein Komma das Semikolon in der alten Linie ändern.

Answer 2

Neben Wartbarkeit, der erste Weg beseitigt Möglichkeit des Unfall globalen Variablen Erstellung:

(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 ist weniger nachsichtig:

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

Answer 3

Es ist üblich, ein var zu verwenden Anweisung pro Umfang für die Organisation. Die Art und Weise alle „Bereiche“ folgen einem ähnlichen Muster den Code besser lesbar zu machen. Zusätzlich „hisst“ der Motor sich alle nach oben sowieso. So Ihre Erklärungen zusammen imitiert zu halten, was tatsächlich eng mehr passieren wird.

Answer 4

Es ist viel besser lesbar, wenn es auf diese Weise tun:

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

Aber nimmt weniger Platz und Codezeilen auf diese Weise:

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

Es kann platzsparend ideal sein, aber sie JavaScript Kompressoren es für Sie.

Answer 5

Es ist nur eine Frage des persönlichen Geschmacks. Es gibt keinen Unterschied zwischen diesen beiden Möglichkeiten, außer ein paar Bytes mit der zweiten Form gespeichert, wenn Sie den weißen Raum Streifen aus.

Answer 6

Vielleicht wie diese

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

Außer, wenn die erste oder die letzte Variable ändert es leicht zu pflegen und zu lesen.

Answer 7

ECMAScript6 introducted Destrukturierung Zuordnung denen funktioniert recht schön:

[a, b] = [1, 2] a wird gleich 1 und b wird 2 entsprechen.

Answer 8

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

ist besser lesbar als:

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

Aber sie tun das gleiche.

Answer 9

Mit ES6 < strong> Destrukturierung Zuordnung : . Es wird Wert von Arrays auspacken, 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

Answer 10

Meine einzige, noch wesentliche Verwendung von comma ist in einem for-Schleife:

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

ich hier ging zu schauen, ob dies OK in JavaScript.

Auch sehen sie arbeiten, blieb die Frage, ob n an die Funktion lokal ist.

Dies bestätigt, n local:

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 nicht sicher, zwischen den Sprachen wechseln.

Answer 11

Obwohl beide gültig sind, schreckt die zweite mit unerfahrenen Entwickler aus platzieren var Aussagen ganz über den Platz und verursachen Heben Fragen. Wenn es nur eine var pro Funktion, an der Spitze der Funktion ist, dann ist es einfacher, den Code als Ganze zu debuggen. Dies kann bedeuten, dass die Zeilen, in denen die Variablen deklariert werden, sind nicht so explizit wie einige mögen können.

Ich glaube, dass Trade-off ist es wert, wenn es bedeutet, einen Entwickler aus der Drop ‚var‘ Entwöhnung überall sie Lust hat.

Die Menschen können über JSLint beschweren, ich auch, aber viel davon ist darauf ausgerichtet nicht auf Befestigungs Probleme mit der Sprache, aber schlechte Gewohnheiten der Programmierer bei der Korrektur und damit Probleme im Code zu verhindern, schreiben sie. Deshalb:

"In Sprachen mit Block Umfang, empfiehlt es sich in der Regel, dass Variablen an der Stelle der ersten Verwendung deklariert werden. Aber weil kein JavaScript Block Umfang haben, ist es klüger, die alle einer Funktion Variablen am Anfang der Funktion zu erklären . Es wird empfohlen, dass eine einzelne Anweisung var pro Funktion verwendet werden.“ - http://www.jslint.com/lint.html#scope

Answer 12

Ich denke, es ist eine Frage des persönlichen Geschmacks. Ich ziehe es in der folgenden Art und Weise zu tun:

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

Answer 13

Ein weiterer Grund, die einzige Anweisung Version (single var ) zu vermeiden, ist das Debuggen. Wenn eine Ausnahme geworfen wird jede der Zuordnungslinien zeigt der Stack-Trace nur die eine Zeile.

Wenn Sie 10 Variablen hatte mit dem Komma-Syntax definiert Sie keine Möglichkeit haben, direkt zu wissen, was man war der Schuldige.

Der einzelne GuV-Struktur leidet nicht an dieser Zweideutigkeit.

Answer 14

Das Konzept der „Kohäsions über Kopplung“ angewandt werden kann allgemeiner als nur Objekte / Module / Funktionen. Es kann auch in dieser Situation dienen:

Das zweite Beispiel vorgeschlagen, die OP gekoppelt hat alle Variablen in die gleiche Aussage, die es unmöglich, nehmen Sie eine der Linien macht und es irgendwo anders bewegen, ohne zu brechen Material (High-Kupplung). Das erste Beispiel gab er macht die Variablenzuweisungen unabhängig voneinander (niedrigen Kopplung).

„Low-Kupplung ist oft ein Zeichen für ein gut strukturiertes Computersystem und ein gutes Design, und wenn sie mit hohen Kohäsion kombiniert, unterstützt die allgemeinen Ziele von hohen Lesbarkeit und Wartbarkeit.“

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

die ersten So wählen.

Answer 15

Ich glaube, dass, bevor wir ES6 begannen verwenden, Ansatz mit einzelner var Erklärung war weder gut noch schlecht (im Fall, wenn Sie Linters und 'use strict' haben. Es war wirklich Vorliebe schmecken. Aber jetzt die Dinge geändert für mich. Es ist meine Gedanken in zugunsten der mehrzeilige Erklärung:

1. Nun haben wir zwei neue Arten von Variablen und var wurde obsolet. Es ist gute Praxis const verwenden überall, bis Sie wirklich let brauchen. So oft wird Ihr Code enthält Variablendeklarationen mit assigment in der Mitte des Codes, und weil der Block Scoping Sie ziemlich oft Variablen zwischen den Blöcken bei kleinen Änderungen bewegen. Ich denke, dass es mehr convinient ist mit mehrzeiligen Erklärungen zu tun.

2. ES6 Syntax vielfältiger geworden ist, haben wir Destruktoren Template Strings, Pfeil Funktionen und optional assigments. Wenn Sie stark alle verwenden, die mit einzelnen var Erklärungen bietet es weh tut Lesbarkeit.

Answer 16

Eine alte Post, ich weiß, aber ein kleines Detail der Perspektive für fellow Googler hinzufügen

Das Problem Wartbarkeit ziemlich leicht mit einer wenig Formatierung, wie solche überwunden werden kann.

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

Ich verwende diese Formatierung streng als eine Frage der persönlichen Präferenz. Ich überspringe dieses Format für einzelne Erklärungen, natürlich, oder wo es einfach die Werke Zahnfleisch auf.

Answer 17

Ich denke, der erste Weg (mehr VARs) am besten ist, da man sonst mit diesem Ende kann (aus einer Anwendung, den Knockout verwendet), die schwierig ist, meiner Meinung nach zu lesen:

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