在 JavaScript 中,可以像这样声明多个变量:
var variable1 = "Hello, World!";
var variable2 = "Testing...";
var variable3 = 42;
...或者像这样:
var variable1 = "Hello, World!",
variable2 = "Testing...",
variable3 = 42;
一种方法比另一种更好/更快吗?
在 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 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 hey = 23;
var hi = 3;
var howdy 4;
但是这样占用更少的空间和代码行:
var hey=23,hi=3,howdy=4;
它可以是节省空间的理想选择,但让 JavaScript 压缩器为您处理它。
每个组织范围使用一个var
语句是很常见的。所有“范围”的方式都遵循类似的模式,使代码更具可读性。此外,无论如何,发动机都会将它们全部“提升”到顶部。因此,将您的声明放在一起可以更紧密地模仿实际发生的事情。
这只是个人喜好问题。这两种方式之间没有区别,除了如果去掉空格,第二种形式会保存几个字节。
也许像这样
var variable1 = "Hello, World!"
, variable2 = 2
, variable3 = "How are you doing?"
, variable4 = 42;
除了更改第一个或最后一个变量时,它易于维护和读取。
使用ES6 解构赋值:它将数组中的值或对象中的属性解包到不同的变量中。
let [variable1 , variable2, variable3] =
["Hello, World!", "Testing...", 42];
console.log(variable1); // Hello, World!
console.log(variable2); // Testing...
console.log(variable3); // 42
var variable1 = "Hello, World!";
var variable2 = "Testing...";
var variable3 = 42;
比以下更具可读性:
var variable1 = "Hello, World!",
variable2 = "Testing...",
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)的另一个原因是调试。如果在任何分配行中引发异常,则堆栈跟踪仅显示一行。
如果您使用逗号语法定义了 10 个变量,您将无法直接知道哪个是罪魁祸首。
个人陈述版本不受这种歧义的影响。
我认为这是个人喜好问题。我更喜欢通过以下方式做到这一点:
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 */;
可维护性问题可以很容易地通过一些格式化来克服,如下所示:
let
my_var1 = 'foo',
my_var2 = 'bar',
my_var3 = 'baz'
;
我严格按照个人喜好使用这种格式。当然,对于单个声明,我会跳过这种格式,或者它只是把工作搞砸了。
正如每个人所说,它主要是偏好和可读性,但我会在线程上发表评论,因为我没有看到其他人分享这种想法
我认为这个问题的答案很大程度上取决于您设置的变量以及它们之间的关系。我尝试根据我创建的变量是否相关来保持一致;我的偏好通常看起来像这样:
我将它们单线排列,以便以后可以轻松移动它们;我个人绝不会以任何其他方式声明不相关的项目:
const unrelatedVar1 = 1;
const unrelatedVar2 = 2;
const unrelatedVar3 = 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;
如果使用同一个构造函数创建多个变量,我通常也会将它们组合在一起;我个人觉得这更具可读性
而不是像(我通常不这样做)
const stooge1 = Person("moe");
const stooge2 = Person("curly");
const stooge3 = Person("larry");
我通常会这样做:
const [stooge1, stooge2, stooge3] = ["moe", "curly", "larry"].map(Person);
我说通常是因为如果输入参数足够长以至于变得不可读,我会将它们分开。
我同意其他人关于使用严格的评论
我相信在我们开始使用 ES6 之前,使用单个 var 声明的方法既不好也不坏(如果你有 linter 和'use strict'
. 这确实是一种口味偏好。但现在情况对我来说发生了变化。这些是我赞成的想法多行声明:
现在我们有了两种新的变量,并且var
已经过时了。const
在您真正需要之前,在任何地方都使用它是一种很好的做法let
。因此,您的代码通常会在代码中间包含带有赋值的变量声明,并且由于块作用域,您经常会在块之间移动变量以防发生小的变化。我认为使用多行声明更方便。
ES6 语法变得更加多样化,我们得到了析构函数、模板字符串、箭头函数和可选赋值。当您大量使用所有这些功能与单个变量声明时,它会损害可读性。
我认为第一种方法(多个变量)是最好的,否则你可能会得到这个(来自使用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;
});