在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 hey = 23;
var hi = 3;
var howdy 4;
但是这种方法占用的空间和代码行数更少:
var hey=23,hi=3,howdy=4;
它是节省空间的理想选择,但是让JavaScript压缩器为您处理它。
其他回答
这只是个人喜好的问题。这两种方式之间没有区别,只是如果去掉空白,第二种形式节省了一些字节。
除了可维护性,第一种方法消除了意外创建全局变量的可能性:
(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
}());
我认为第一种方法(多个变量)是最好的,否则你就会得到这样的结果(来自使用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;
});
我们可以使用所有的方法,没有必要只选择其中一种。应用不同的方法可以使代码更易于阅读。
我将展示我Vue.js 3项目中的一个真实例子:
示例1
const [store, route] = [useStore(), useRoute()]
const
showAlert = computed(() => store.getters['utils/show']),
userIsLogged = computed(() => store.getters['auth/userIsLogged']),
albumTitle = computed(() => store.getters['albums/title']);
示例2
const
store = useStore(),
username = ref(''),
website = ref(''),
about = ref('');
const
isAppFirstRender = computed(() => store.getters['utils/isAppFirstRender']),
showToast = ref(false);
正如你在上面看到的,我们可以有一小块变量声明。没有必要声明大块。假设我有12个变量,我可以以一种有意义或看起来更容易阅读的方式将它们分组,而不需要冗长:
const
numberOne = 5,
numberTwo = 10,
numberThree = 15;
const
stringOne = 'asd',
stringTwo = 'asd2',
stringThree = 'asd3';
let [one, two, three] = [1,2,3]
当然,每个人都有自己的风格。这是我个人的偏好,混合使用所有方法。
我个人不喜欢冗长。我喜欢有它所需要的而不是更多的代码。
虽然两者都是有效的,但使用第二种方法会使缺乏经验的开发人员不愿意到处放置var语句,从而导致提升问题。如果每个函数只有一个var,在函数的顶部,那么从整体上调试代码会更容易。这可能意味着声明变量的行不像某些人希望的那样显式。
我觉得这种权衡是值得的,如果这意味着让开发者不再在任何他们喜欢的地方使用“var”。
人们可能会抱怨JSLint,我也一样,但是很多JSLint并不是为了修复语言的问题,而是为了纠正编码员的坏习惯,从而防止他们编写的代码出现问题。因此:
在具有块作用域的语言中,通常建议在第一次使用变量的位置声明变量。但是因为JavaScript没有块作用域,所以更明智的做法是在函数的顶部声明函数的所有变量。建议每个函数使用一个var语句。”——http://www.jslint.com/lint.html范围