在JavaScript中声明多个变量

2020/10/02 04:41 · javascript ·  · 0评论

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

在组织的每个范围中通常使用一个var语句所有“作用域”遵循相似模式的方式使代码更具可读性。此外,引擎无论如何都将它们“提升”到顶部。因此,将您的声明放在一起可以模仿实际上会发生的事情。

这样操作时,它的可读性更高:

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

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

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

它可能是节省空间的理想选择,但是让JavaScript压缩器为您处理它。

ECMAScript6引入了分解工作,该工作相当不错:

[a, b] = [1, 2]

a将等于1b将等于2

也许是这样

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

除了更改第一个或最后一个变量时,它易于维护和读取。

这只是个人喜好问题。这两种方式之间没有什么区别,除了如果删除空白,第二种形式会节省一些字节。

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

比以下内容更具可读性:

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

但是他们做同样的事情。

使用ES6解构 分配:将数组中的值或对象中的属性解压缩为不同的变量。

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

console.log(variable1); // Hello World!
console.log(variable2); // Testing...
console.log(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 /* 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 */;

避免使用单语句版本(单个var)的另一个原因是调试。如果在任何分配行中引发了异常,则堆栈跟踪仅显示一行。

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

个别声明版本不会遭受这种歧义。

我知道这是一篇旧文章,但为其他Google员工添加了一些观点上的细节:

只需使用少量格式即可轻松解决可维护性问题。

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

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

“耦合之上的内聚”的概念不仅可以用于对象/模块/功能,还可以更普遍地应用。它也可以在这种情况下使用:

OP建议的第二个示例将所有变量都耦合到同一条语句中,这使得不可能采用其中的一行并将其移动到其他位置而不会破坏东西(高度耦合)。他给出的第一个示例使变量分配彼此独立(低耦合)。

“低耦合通常是结构良好的计算机系统和良好设计的标志,当与高凝聚力结合使用时,可以达到较高的可读性和可维护性的总体目标。”

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

因此,选择第一个。

我相信,在我们开始使用ES6之前,使用单个var声明的方法既不好也不坏(如果您有短绒棉和'use strict'。这确实是口味偏好。但是现在情况对我来说已经改变了。我有一些想法支持多行声明) :

  1. 现在我们有了两种新的变量,并且var已经过时了。最好const在您真正需要的地方使用它let因此,您的代码通常会在代码中间包含变量声明和赋值,并且由于块作用域的限制,在进行较小更改的情况下,您经常会在块之间移动变量。我认为使用多行声明更方便。

  2. ES6语法变得更加多样化,我们有了析构函数,模板字符串,箭头函数和可选的附件。当您在单个var声明中大量使用所有功能时,会损害可读性。

我认为第一种方式(多个vars)是最好的,因为您最终可能会以这种方式(使用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;
        });
本文地址:http://javascript.askforanswer.com/zaijavascriptzhongshengmingduogebianliang.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!