在JavaScript中声明多个变量

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

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

...或这样：

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

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

至于更快，使用这种jsperf时，使用一种方法或另一种方法都无法获得一致的速度增益。

#1 楼

第一种方法更易于维护。每个声明都是在一行上的单个声明，因此您可以轻松地添加，删除和重新排列声明。
使用第二种方法，删除第一个或最后一个声明很烦人，因为它们以var关键字开头并分别以分号结束。每次添加新的声明时，都必须用逗号替换最后一行的分号。

如果编写的代码希望以后缩小或打包，则第二种方法允许压缩程序（例如YUI Compressor）为您提供更缩小的版本。如果考虑大小，那么我建议尽可能遵循JSLint的建议。

–车道
11年8月18日在21:48

jslint声称第二种方式更合理，但我不同意。

– ThatGuy
2011年9月8日下午4:32

第二种方法是微优化。所有的var声明都被一次处理，而不是一次处理。在现代浏览器/现代计算机中，这无关紧要。

– webnesto
2012年4月14日在0:19

@ 0xc0de：我想看看在一条语句中将所有变量声明为“有效”的证明。如果仅根据节省的几个字节来衡量效率，那么也许可以。但是，如果考虑到可读性和可维护性，我认为您会发现过早优化通常是错误的方法，特别是因为现代浏览器会在执行前通过收集和初始化作用域中的所有变量。就个人而言，我发现所有变量都在单行或语句中声明，以使快速理解代码变得更加困难，并且更容易出错。

– ogradyjd
2013年9月3日在11:51

关于效率，uglifyjs和Google闭包编译器都会自动将顺序var语句压缩为一个，从而使这一点变得毫无意义（据我所知，YUI不会这样做，但是我尚未进行广泛的测试）。

–保柏
2014-2-17在15:58

#2 楼

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

(function () {
var variable1 = "Hello, World!" // Semicolon is missed out accidentally
var variable2 = "Testing..."; // Still a local variable
var variable3 = 42;
}());

第二种方法的宽容度却较小：

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

好点子。如果它们很短，那么在一行上写将避免此问题：var variable1 =“ Hello World！”，variable2 =“ Testing ...”，variable3 = 42;。丢失，将崩溃，但我同意这样做有风险

–阿拉姆·科恰良（Aram Kocharyan）
2012年1月16日4:18

如果您使用的是严格模式，则无论如何都无法创建这样的全局变量。

– Danyal Aytekin
2012年10月24日10:42

我喜欢在一行上声明多个变量，因为我认为它看起来更干净。也就是说，意外声明全局变量是真正的危险。在寻找内存泄漏时，我遇到了多个实例，其中由于使用分号而不是逗号而意外地一次声明了几个全局变量。

–smabbott
13年3月6日在15:26

+1只是花了一半的时间，甚至开始想知道为什么这两个声明之间存在未记录的差异。然后阅读此答案，仔细检查代码，发现错误。需要假期...

–吉德里斯
13年4月29日在21:50

如果我错过昏迷，我的文本编辑器会给我一个可能的致命错误，为我加油！

–user4463826
2015年2月3日，下午3:35

#3 楼

这样执行时，它更具可读性：

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

，但是这样占用的空间和代码行更少：

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

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

#4 楼

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

您可以将声明保持在一起，而不必使它们共享相同的“ var”声明。我理解并接受jslint（您的链接）给出的解释，但我不同意结论。如上所述，这比风格更重要。在Java世界（以及其他世界）中，建议使用反向（每行一个声明）以提高可读性。

– PhiLho
2011年5月19日在12:34

更具可读性？人们将它们放在一行上的唯一原因是您提到的特定于JS的原因：JS将所有声明移到顶部。如果不这样做，我们所有人都将声明我们的变量最接近使用它们的地方。

– Danyal Aytekin
2012年10月24日上午10:45

@ vol7ron并非如此，这是对var语句的严重误解。恰恰相反。请参阅文档和此示例

– jackweirdy
2013年9月17日在12:58

@jackweirdy，您是正确的，确实是这种情况，执行不力或旧版浏览器中的错误。此后，我删除了我的评论。

–vol7ron
2013年9月17日在21:12

#5 楼

ECMAScript 2015引入了相当不错的解构分配：

a等于1和b等于2。

它不能回答问题，但是可以更好地替代上述两种方法。

– svarog
16-09-22在11:23

我认为，如果变量列表很长，那么您的方法实际上是不可行的。很难说出哪个值与哪个变量相关，并且您没有错误保护措施是合并错误，在此期间您可能会意外地从数组中删除一个元素。例如：令[aVar，bVar，cVar，xVar，yVar，zVar] = [10、20、30、40、50]；因此，我个人不建议这样做。

–基里尔·雷兹尼科夫（Kirill Reznikov）
17年5月22日在10:10

如果您想设置很多具有相同值的变量，则非常方便。例如，用于在循环中重置为零。

–尼克
18年11月19日在10:08

是!这就是我想要的。特别是如果要定义二维对或多维值，而不是数组。

– Eugene Kardash
19年8月15日在0:02

#6 楼

也许像这样

var variable1 = "Hello, World!"
, variable2 = 2
, variable3 = "How are you doing?"
, variable4 = 42;

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

通常，使用逗号优先，分号会换行以防止出现此问题。 var variable1 =“ hello world” \ n，variable2 = 2 \ n，variable3 =“你好吗” \ n，variable4 = 42 \ n; \ n

– BrianFreud
2012年1月31日4:08

这是Haskell语法。我觉得不推荐/不推荐使用javascript

– shamanSK
18年6月21日在10:38

#7 楼

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

第二个保存几个字节。

–苏菲·阿尔珀特
09年3月29日在4:40

本·阿尔珀特：您如何看待？

–乔什·斯托多拉（Josh Stodola）
09年3月29日在4:47

如果去除空格，则比'var foo =“ hello”，bar =“ world”;'声明占用的字符少于'var foo =“ hello”; var bar =“ world”;'如果您有一个受欢迎的网站，则在JS上保存一些字节会有所帮助（您还希望最小化变量名，等等）

–布赖恩·坎贝尔
09年3月29日在4:52

由于JavaScript压缩程序（尤其是Google Closer编译器（所谓的）简单模式）的兴起，我目前认为保存的字节无关紧要。

–布莱恩·菲尔德（Bryan Field）
2012年3月27日16:08

当语法的语义相同时，@ webnesto不会对语法产生任何影响。不会立即执行代码，而是先对其进行解析并进行语义分析-这是两种声明样式均等的地方。

– Esailija
13年8月4日在16:09

#8 楼

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

比以下内容更具可读性：

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

但是它们做同样的事情。

使用较少的“文件空间”？我认为您需要做一些解释。

–乔什·斯托多拉（Josh Stodola）
09年3月29日在4:46

@JoshStodola在我看来是相同的文件空间。由于而不是var ，因此它的

– WORMSS
18年5月18日在8:06

@WORMSS，除非它是var 或var vs 。仍然在很大程度上没有定论。

–mpag
18年8月17日在21:12

#9 楼

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

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

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

这是一个糟糕的主意，尤其是当您需要分配大约10个变量时。

–基里尔·雷兹尼科夫（Kirill Reznikov）
18年1月1日在22:41

#10 楼

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

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

单个语句版本不会受到这种歧义的困扰。

#11 楼

我唯一但必不可少的逗号用法是在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");

我不确定一会儿是否在语言之间切换。

#12 楼

尽管两者都是有效的，但是使用第二种方法可以阻止缺乏经验的开发人员将var语句放在各处，并引起提升问题。如果每个函数只有一个var，则在函数顶部，则更容易对整个代码进行调试。这可能意味着声明变量的行并不像某些人想的那么明确。
我认为权衡是值得的，如果这意味着要让开发人员不要在他们喜欢的任何地方放弃“ var” 。
人们可能也会抱怨JSLint，我也这样做，但是很多原因不是为了解决语言问题，而是为了纠正程序员的不良习惯，从而防止他们编写的代码出现问题。因此：

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

链接已（有效）断开-重定向到通用页面。

– Peter Mortensen
20-10-30在7:26

#13 楼

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

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

#14 楼

只需使用一些格式即可轻松解决可维护性问题，例如：

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

我严格按照个人喜好使用此格式。当然，我跳过了这种格式，只声明了一个地方，或者只是简单地使工作变得困难。

您的格式化要点是什么？让和分号靠自己行吗？或者是其他东西？它以什么方式帮助解决可维护性问题？什么是可维护性问题？（这些不是花哨的问题。）最好的回答是编辑您的答案（不带“编辑：”，“更新：”或类似内容），而不是在注释中。

– Peter Mortensen
20-10-30在7:45

#15 楼

“耦合之上的内聚”的概念不仅仅可以用于对象/模块/功能，还可以更普遍地应用。它也可以在这种情况下使用：
OP建议的第二个示例将所有变量都耦合到同一条语句中，这使得不可能采用其中的一行并将其移动到其他位置而不会破坏东西（高度耦合）。他给出的第一个示例使变量分配彼此独立（低耦合）。
来自耦合：

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

因此选择第一个。

我看不到这与耦合或凝聚力有什么关系。关心详细吗？

–埃德森·麦地那（Edson Medina）
15年1月27日在17:31

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

–镁
15年1月27日在18:17

耦合是关于不同模块/对象/功能之间的相互依赖性，而不是代码行！

–埃德森·麦地那（Edson Medina）
15年1月27日在23:35

最初它是关于模块的，是的，但是这个概念可以更广泛地应用，因为甚至您自己将对象/函数包含在定义中也是如此。

–镁
15年1月28日在9:08

#16 楼

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

现在我们有了两种新的变量，并且var变得过时了，在您真正需要const之前，在所有地方都使用let是个好习惯。将在代码的中间包含带有赋值的变量声明，并且由于块作用域的限制，您经常会在小改动的情况下在块之间移动变量。我认为使用多行声明更方便。

ES6语法变得更加多样化，我们有了析构函数，模板字符串，箭头函数和可选赋值。当您将所有这些功能大量用于单个变量声明时，会损害可读性。

#17 楼

我认为第一种方法（多个变量）是最好的，因为您可能会以其他方式最终结束（从使用KnockoutJS的应用程序中），我认为这很难理解：

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

编程黑洞网