不要再使用"var"声明JavaScript中的变量

发布于2/28/2020 来自:「前端知否」微信公众号

xxx

最开始学习JS的时候,我们使用var关键字声明变量。它很简单而且有效,但是现在需要改变了。

如果您编写类似var x = 5的代码,则需要停止。

我们经常将编程语言视为一组刻板固定的规则。现实情况是,与任何口头语言一样,编程语言也在不断发展。

现在,我使用关键字let, const,在JavaScript中声明所有变量,您也应该如此。

让我们学习如何以及为什么。

声明真正的常量

顾名思义,变量表示变化的值。尽管声明和不改变变量没有什么难的,但是如果我们试图编写具有语义的代码,则应该区分变量和常量。

常量与变量相反,声明一个不变的值。遵循惯例,定义一个常数,我们通常使用大写字母。

不用依靠约定,const关键字的引入为我们提供了一个明确的选项,用于声明哪些内容不会改变。

要使用const关键字,只需用其替换掉var,那就无法再修改该值。

// the old way
var sales_tax = 0.06;

// the new way
const sales_tax = 0.06;

sales_tax = 0.08; // TypeError: Assignment to constant variable.

使用const是简单的。但是什么时候合适呢?

诸如税率,或单位之间转换的数字比率。使用const的另一个地方是:使用箭头符号声明函数。

const myFunction = (x,y) => {
// Do stuff
}

myFunction(1, 2)

现在,您的函数将无法被覆盖。

修正JavaScript的”怪异“作用域

JavaScript缺乏作用域清晰性,常常导致开发和故障排除的失败。以下是JS作用域异常的常见情况:

  • 可以对变量使用两次var(重新声明)
  • 默认情况下,顶级变量是全局变量(全局对象)
  • 可以在声明(提升)之前使用变量
  • 循环中的变量重用了相同的引用(闭包)

使用let可以澄清并解决许多这些奇怪的问题。让我们仔细看看。

重新声明

这很简单,您无法重新声明使用let声明过的变量。

var x = 0;
let y = 0;
var x = 1;
let y = 1; // SyntaxError: Identifier 'y' has already been declared

全局对象

在顶层,用var声明的变量作为属性添加到全局对象,而let变量则不。

var x = 0;
let y = 0;
console.log(window.x); // 0
console.log(window.y); // undefined

作用域提升

用let定义的变量只能在其块范围内访问,而var变量将提升到函数级别。

/* Using var */

console.log(i); // undefined

for(var i=0; i<4; i++) {
console.log(i);
}

console.log(i); // 4

/* Using let */

console.log(j); // ReferenceError: j is not defined

for(let j=0; j<4; j++) {
console.log(j);
}

console.log(j); // ReferenceError: j is not defined

闭包

这是一个很难理解的概念,但是闭包是引用自由变量的函数。

当我们有一个带有var变量的闭包时,会记住该引用,当在循环内更改该变量时,结果会和你的预期不一致。

var functions = [];

for (var i = 0; i < 3; i++) {
functions[i] = () => { console.log(i); };
}

for (var j = 0; j < 3; j++) {
functions[j]();
} // 3 3 3

使用let每次都会创建一个新引用。

var functions = [];

for (let i = 0; i < 3; i++) {
functions[i] = () => { console.log(i); };
}

for (var j = 0; j < 3; j++) {
functions[j]();
} // 0 1 2

最后

即使您不是100%出于这些原因以及明白它们如何工作,切换到let也会让代码更加明确地运行,并且更易于故障排除和维护。

尽管let和const应该有效地替换var关键字,但生活并不总是那么简单。由于这些关键字是在ECMAScript 2015(ES6)中引入的,因此,如果您使用的平台不允许使用该关键字,那么您就不走运了。此外,您需要确保采取措施以确保代码可在目标受众的浏览器中正常运行。