JavaScript中声明多个变量

409
在JavaScript中,可以像这样声明多个变量:
var variable1 = "Hello, World!";
var variable2 = "Testing...";
var variable3 = 42;

...或者像这样:

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

这两种方法中哪一种更好/更快?


7
关于“更快”的问题,使用 这个 jsperf 我没有看到一种方法比另一种更快。 - Majid Fouladpour
9
让我们来翻译这句话:let one=1,two=2,three=3;将其翻译为中文:定义变量one等于1,变量two等于2,变量three等于3; - Omar bakhsh
22个回答

400

第一种方式更易于维护。每个声明都是单独的语句,位于单独的一行上,因此您可以轻松地添加、删除和重新排序声明。

第二种方法很麻烦,因为要删除第一个或最后一个声明,需要分别从var关键字开始并以分号结束。每次添加新声明时,都必须将最后一行旧代码中的分号替换为逗号。


74
如果你正在编写希望将来进行代码缩小或打包的代码,那么第二种方法可以使压缩器(例如YUI压缩器)给出更小的版本。如果大小是一个问题,我建议尽可能遵循JSLint的建议。 - Lane
37
JSLint声称第二种方式更为正确,但我不同意。 - ThatGuy
32
第二种方法是微优化。所有变量声明一次性处理,而不是逐个处理。在现代浏览器/现代计算机中,这并不那么重要。 - webnesto
19
@0xc0de:我希望看到将所有变量在一条语句中声明被称为“高效”的证明。如果你只是从节省几个字节的角度来衡量效率,那么也许可以这样说。但是,如果考虑可读性和可维护性,通常过早地进行优化往往是错误的方式,特别是现代浏览器会在预执行阶段收集和初始化作用域中的所有变量。就我个人而言,我认为将所有变量都声明在一行或一条语句中会使代码更难理解,增加出错的风险。 - ogradyjd
10
就效率而言,uglifyjs 和 Google Closure Compiler 都会自动将连续的 var 语句压缩成一个,这点似乎不需要考虑(据我所知 YUI 不会这样做,但我没有进行详细测试)。 - bhuber
显示剩余4条评论

239

除了可维护性外,第一种方法还消除了意外创建全局变量的可能性:

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

4
好的。如果它们很短,那么在单行上编写将避免这个问题:var variable1 = "Hello World!", variable2 = "Testing...", variable3 = 42;。漏掉一个,会导致崩溃,但我同意这是有风险的。 - Aram Kocharyan
19
如果你正在使用严格模式,无论如何都无法创建这样的全局变量。 - Danyal Aytekin
1
我喜欢在一行上声明多个变量,因为我认为这样看起来更清晰。但是,意外声明全局变量是一个真正的危险。在查找内存泄漏时,我遇到过多个实例,因为我使用了分号而不是逗号,所以意外地同时声明了几个全局变量。 - smabbott
1
我的文本编辑器如果我错过了逗号就会给我一个“可能致命错误”的提示,太好了! - user4463826

51

使用这种方式更易读:

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

但是这种方法占用更少的空间和代码行数:

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

对于节省空间来说,使用这种方式是理想的,但最好让 JavaScript 压缩器为您处理。


47

它可能不是回答问题的方法,但它可以成为两种描述方法的更好替代方案。 - svarog
3
如果你有很长的变量列表,我认为你的方法不太可行。很难确定哪个变量对应哪个值,并且如果在错误合并期间意外删除了一个数组元素,就没有保护措施。例如:let [aVar, bVar, cVar, xVar, yVar, zVar] = [10, 20, 30, 40, 50];所以,个人不建议使用这种方法。 - Kirill Reznikov
2
虽然很方便,但如果您想设置许多变量具有相同的值,则可以使用。例如,在循环中将其重置为零。 - Nick
1
是的!这正是我在寻找的。特别是如果您想定义二维对或多维值,但不是数组。 - Eugene Kardash

32

通常为了组织代码,每个作用域只使用一个var语句是很普遍的。所有“作用域”的方式都遵循相似的模式,使代码更易读。此外,引擎会将它们全部提升到顶部。因此,保持声明在一起更接近实际发生的情况。


6
你可以将声明放在一起,而不必共享相同的“var”声明。我理解并接受JSLint(你提供的链接)上给出的解释,但我不同意结论。正如上面所说,这更多是风格问题,而不是其他方面的问题。在Java世界(和其他领域),为了可读性,推荐采用每行一个声明的方式。 - PhiLho
更易读?人们将它们放在一行上的唯一原因是你提到的 JS 特定原因:JS 将所有声明移动到顶部。如果它不这样做,我们都会在最接近使用它们的地方声明变量。 - Danyal Aytekin

17

这只是个人偏好的问题。这两种方式没有任何区别,除了第二种形式如果去掉空格可以节省一些字节。


1
第二个可以节省几个字节。 - Sophie Alpert
如果去掉空格,那么 'var foo="hello",bar="world";' 声明所占用的字符比 'var foo="hello";var bar="world";' 更少。如果您有一个受欢迎的网站,JS 中节省几个字节可能会有所帮助(您还需要最小化变量名称等)。 - Brian Campbell
我认为目前保存的字节是无关紧要的,因为JavaScript缩小器的兴起,特别是Google Closer编译器的(所谓的)简单模式。 - 700 Software
这是一个错误的陈述 - 运行时引擎处理它们的方式存在差异(至少在旧版浏览器中有差异,现代浏览器不确定)。我记得在Zakas的《高性能Javascript》一书中读到过,但我现在很难定位。我会保持警觉,并在找到参考资料后回来查看。不管怎样,这并不是一个重要的区别 - 只是我记得的性能上的一点微小差异(即微观性能差异)。 - webnesto
1
@webnesto 当语法的语义相同时,语法的性能永远不会有任何影响。代码不会立即执行,而是首先进行解析和语义分析 - 这就是两种声明样式被等同化的地方。 - Esailija

15
也许像这样。
var variable1 = "Hello, World!"
, variable2 = 2
, variable3 = "How are you doing?"
, variable4 = 42;

除非改变第一个或最后一个变量,否则易于维护和阅读。


6
通常使用逗号优先的写法,分号放在新行上以避免出现问题。 var variable1 = "hello world"\n , variable2 = 2\n , variable3 = "how are you doing"\n , variable4 = 42\n ;\n - BrianFreud
4
这是 Haskell 的语法。我觉得在 JavaScript 中它并不推荐或常用。 - 99problems

14
使用ES6 解构赋值:它可以将数组中的值或对象中的属性解包到不同的变量中。

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

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


9
这个想法很糟糕,特别是如果你需要分配大约10个变量。 - Kirill Reznikov

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

相对于以下代码更易读:

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

但它们做的事情是相同的。


“使用更少的文件空间”?我想你需要解释一下。 - Josh Stodola
@JoshStodola 对我来说看起来是同一个文件空间。因为它是 <space><space><space><space> 而不是 var<space> - WORMSS
1
@WORMSS,除非是var<space>var<tab><tab>相比,否则仍然基本无关紧要。 - mpag

7
虽然两种方法都是有效的,但使用第二种方法可以防止经验不足的开发人员在各个地方放置var语句并导致提升问题。如果每个函数只有一个var,位于函数顶部,则更容易调试整个代码。这意味着声明变量的行可能不像某些人希望的那样明确。
我认为这种权衡是值得的,如果它意味着让开发人员不再随意丢弃'var'。
人们可能会抱怨JSLint,我也是,但其中很多都是针对修复语言问题的,而是纠正程序员的坏习惯,从而避免他们编写的代码中出现问题。因此:
“在具有块作用域的语言中,通常建议在第一次使用时声明变量。但由于JavaScript没有块作用域,因此最好在函数的顶部声明所有变量。建议每个函数使用单个var语句。” - http://www.jslint.com/lint.html#scope

链接已经(有效地)损坏 - 它重定向到一个通用页面。 - Peter Mortensen

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接