在JavaScript中,可以像这样声明多个变量:

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

...或者像这样:

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

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


当前回答

我认为这是个人喜好的问题。我喜欢用下面的方法做这件事:

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

其他回答

我们可以使用所有的方法,没有必要只选择其中一种。应用不同的方法可以使代码更易于阅读。

我将展示我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]

当然,每个人都有自己的风格。这是我个人的偏好,混合使用所有方法。

我个人不喜欢冗长。我喜欢有它所需要的而不是更多的代码。

“内聚优于耦合”的概念可以更广泛地应用,而不仅仅是对象/模块/函数。它还可以用于以下情况:

OP建议的第二个示例将所有变量耦合到同一个语句中,这使得不可能在不破坏东西的情况下将其中一行移动到其他地方(高耦合)。他给出的第一个例子使得变量分配彼此独立(低耦合)。

从耦合:

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

所以选择第一个。

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

Let [variable1, variable2, variable3] = ["Hello, World!", "Testing…",42]; console.log (variable1);//你好,世界! 如上所述console.log(的操作);/ /测试…… console.log (variable3);/ / 42

我认为第一种方法(多个变量)是最好的,否则你就会得到这样的结果(来自使用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;
        });

虽然两者都是有效的,但使用第二种方法会使缺乏经验的开发人员不愿意到处放置var语句,从而导致提升问题。如果每个函数只有一个var,在函数的顶部,那么从整体上调试代码会更容易。这可能意味着声明变量的行不像某些人希望的那样显式。

我觉得这种权衡是值得的,如果这意味着让开发者不再在任何他们喜欢的地方使用“var”。

人们可能会抱怨JSLint,我也一样,但是很多JSLint并不是为了修复语言的问题,而是为了纠正编码员的坏习惯,从而防止他们编写的代码出现问题。因此:

在具有块作用域的语言中,通常建议在第一次使用变量的位置声明变量。但是因为JavaScript没有块作用域,所以更明智的做法是在函数的顶部声明函数的所有变量。建议每个函数使用一个var语句。”——http://www.jslint.com/lint.html范围