对于不相关的变量

Question

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

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

......或者像这样：

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

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

Answer 1

第一种方式更容易维护。每个声明都是一行中的单个声明，因此您可以轻松添加，删除和重新排序声明。

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

Answer 2

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

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

Answer 3

将one var statement per scope用于组织是很常见的。所有“范围”的方式都遵循类似的模式，使代码更具可读性。此外，发动机无论如何都将它们“升起”到顶部。所以保持你的声明在一起模仿实际发生的事情会更紧密。

Answer 4

这样做时更具可读性：

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

但这样可以占用更少的空间和代码行：

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

它可以非常适合节省空间，但让JavaScript压缩器为您处理它。

Answer 5

这只是个人偏好的问题。除了用第二种形式保存的几个字节外，如果你去除空白区域，这两种方式之间没有区别。

Answer 6

也许就像这样

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

除非更改第一个或最后一个变量，否则很容易维护和阅读。

Answer 7

ECMAScript6介绍destructuring assignment非常好用：

[a, b] = [1, 2] a等于1，b等于2。

Answer 8

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

比以下内容更具可读性：

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

但他们做同样的事情。

Answer 9

我对逗号的唯一但必要的用法是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");

有一刻我不确定，在语言之间切换。

Answer 10

使用 ES6 Destructuring assignment：它会将数组中的值或对象的属性解压缩到不同的变量中。

＆＃13;

let [variable1 , variable2, variable3] = 
["Hello World!", "Testing...", 42];

console.log(variable1); // Hello World!
console.log(variable2); // Testing...
console.log(variable3); // 42

＆＃13;

Answer 11

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

我觉得权衡取舍是值得的，如果这意味着让开发人员不再放弃“变种”。他们想要的任何地方。

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

＆＃34;在具有块范围的语言中，通常建议在首次使用的站点声明变量。但是因为JavaScript没有块范围，所以在函数顶部声明所有函数的变量是明智的。建议每个函数使用一个var语句。＆＃34; - http://www.jslint.com/lint.html#scope

Answer 12

我认为这是个人偏好的问题。我更喜欢以下列方式进行：

   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

避免单个语句版本（单个 var ）的另一个原因是调试。如果在任何的赋值行中抛出异常，则堆栈跟踪仅显示一行。

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

个人陈述版本不会受到这种歧义的影响。

Answer 14

“Cohesion over Coupling”的概念可以更广泛地应用于对象/模块/功能。它也适用于这种情况：

OP提出的第二个例子已经将所有变量耦合到同一个语句中，这使得无法取出其中一行并将其移动到其他地方而不会破坏东西（高耦合）。他给出的第一个例子使变量赋值彼此独立（低耦合）。

“低耦合通常是结构良好的计算机系统和良好设计的标志，当与高内聚相结合时，支持高可读性和可维护性的一般目标。”

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

所以选择第一个。

Answer 15

我相信在我们开始使用ES6之前，使用单个var声明的方法既不好也不坏（如果你有短语和'use strict'。这真的是味道偏好。但现在情况发生了变化。我的想法是支持多线声明：

现在我们有两种新变量，var已经过时了。最好在所有地方使用const，直到您真正需要let。因此，您的代码通常会在代码中间包含带有赋值的变量声明，并且由于块作用域，您经常会在块之间移动变量以防小变化。我认为使用多行声明更方便。
ES6语法变得更加多样化，我们得到了析构函数，模板字符串，箭头函数和可选的分配。当您大量使用单个var声明的所有功能时，会损害可读性。

Answer 16

我认为第一种方式（多个变量）是最好的，因为你可以最终得到这个（来自使用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;
        });

Answer 17

我知道是一篇旧文章，但为其他Google员工添加了一些小角度的观点：

只需使用一些这样的格式就可以轻松解决可维护性问题。

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

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

Answer 18

正如每个人所说的，这主要是偏好和可读性，但我会在线程上发表评论，因为我没有看到其他人有这种想法

我认为这个问题的答案很大程度上取决于您设置的变量以及它们之间的关系。我尝试根据我创建的变量是否相关来保持一致；我的偏好通常是这样的：

对于不相关的变量

我对它们进行了单行排列，以便以后可以轻松移动它们；我个人绝不会以任何其他方式声明不相关的项目：

const unrelatedVar1 = 1;
const unrelatedVar1 = 2;
const unrelatedVar1 = 3;

对于相关事物（实用程序）

如果我要创建新变量，我将其声明为一个块——这表明这些属性属于一起

const
  x = 1,
  y = 2,
  z = 3
;

// or
const x=1, y=2, z=3;

// or if I'm going to pass these params to other functions/methods
const someCoordinate = {
  x = 1,
  y = 2,
  z = 3
};

对我来说，这与解构更一致：

const {x,y,z} = someCoordinate;

做这样的事情会很笨拙（我不会这样做）

const x = someCoordiante.x;
const y = someCoordiante.y;
const z = someCoordiante.z;

在JavaScript中声明多个变量

18 个答案:

对于不相关的变量

对于相关事物（实用程序）

相关的东西（建筑）