在JavaScript中声明多个变量

在JavaScript中，可以这样声明多个变量：

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

...或像这样：

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

一种方法比另一种方法更好/更快吗？

第一种方法更易于维护。每个声明都是在一行上的单个语句，因此您可以轻松地添加，删除和重新排列声明。

使用第二种方法时，删除第一个或最后一个声明很烦人，因为它们包含var关键字和分号。每次添加新的声明时，都必须将旧行中的分号更改为逗号。

除了可维护性之外，第一种方法消除了事故全局变量创建的可能性：

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

虽然第二种方法不太宽容：

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

在组织的每个范围中通常只使用一个var语句。所有“作用域”遵循相似模式的方式使代码更具可读性。此外，引擎无论如何都将它们“提升”到顶部。因此，将您的声明放在一起可以模仿实际上会发生的事情。

这样做的话，可读性更高：

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

但是这种方式占用的空间和代码行更少：

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

它可能是节省空间的理想选择，但是让JavaScript压缩器为您处理它。

也许是这样

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

除了更改第一个或最后一个变量时，它易于维护和读取。

这只是个人喜好问题。这两种方式没有什么区别，除了如果删除空白，第二种形式会节省一些字节。

ECMAScript6引入了分解工作，该工作相当不错：

[a, b] = [1, 2] a将等于1和b将等于2。

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

比以下内容更具可读性：

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

但是他们做同样的事情。

使用ES6解构 分配：将数组中的值或对象中的属性解压缩为不同的变量。

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

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

我唯一但必不可少的逗号用法是在for循环中：

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

我去这里查看在JavaScript中是否可以。

即使看到它起作用，仍然存在一个问题，即n是否在函数本地。

这验证n是本地的：

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

有一阵子我不确定，是否在语言之间切换。

尽管两者都是有效的，但使用第二种方法可以阻止缺乏经验的开发人员将var语句放在各处，并引起提升问题。如果每个函数只有一个var，则在函数顶部，则更容易对整个代码进行调试。这可能意味着声明变量的行并不像某些人希望的那样明确。

我认为，权衡是值得的，如果这意味着要让开发人员放弃在他们喜欢的任何地方放弃“ var”。

人们也可能抱怨JSLint，我也这样做，但是很多它不是为了解决语言问题，而是为了纠正编码人员的不良习惯，从而防止他们编写的代码出现问题。因此：

“在具有块范围的语言中，通常建议在首次使用的位置声明变量。但是，由于JavaScript没有块范围，因此在函数顶部声明所有函数变量是比较明智​​的。建议每个函数使用一个var语句。” - http://www.jslint.com/lint.html#scope

我认为这是个人喜好问题。我更喜欢通过以下方式：

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

避免使用单语句版本（单个var）的另一个原因是调试。如果在任何分配行中引发了异常，则堆栈跟踪仅显示一行。

如果您有10个用逗号语法定义的变量，则您将无法直接知道哪个是罪魁祸首。

单个语句版本不会遭受这种歧义。

“耦合之上的内聚”的概念不仅可以用于对象/模块/功能，还可以更普遍地应用。它也可以在这种情况下使用：

OP建议的第二个示例将所有变量都耦合到同一条语句中，这使得不可能采用其中的一行并将其移动到其他位置而不会破坏东西（高度耦合）。他给出的第一个示例使变量分配彼此独立（低耦合）。

“低耦合通常是结构良好的计算机系统和良好设计的标志，并且与高凝聚力结合使用时，可以达到较高的可读性和可维护性的总体目标。”

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

因此，选择第一个。

我知道是一篇旧文章，但为Google同事们添加了一些观点上的细节：

只需使用少量格式即可轻松解决可维护性问题。

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

我严格按照个人喜好使用这种格式。当然，我跳过了这种格式，只声明了一个声明，或者只是简单地修饰了作品。

我相信，在我们开始使用ES6之前，使用单个var声明的方法既不好也不坏（如果您有短绒棉和'use strict'。这确实是口味偏好。但是现在情况对我来说已经改变了。我有想法支持多行声明） ：

1. 现在，我们有了两种新的变量，并且var已经过时了。最好const在您真正需要的地方使用它let。因此，您的代码经常会在代码中间包含变量声明和赋值，并且由于块作用域的限制，在进行较小更改的情况下，您经常会在块之间移动变量。我认为使用多行声明更方便。

2. ES6语法变得更加多样化，我们有了析构函数，模板字符串，箭头函数和可选的附件。当您在单个var声明中大量使用所有功能时，会损害可读性。

我认为第一种方式（多个vars）是最好的，因为您最终可能会以这种方式（使用Knockout的应用程序）结束这种方式，我认为这很难理解：

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