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

最开始学习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)中引入的,因此,如果您使用的平台不允许使用该关键字,那么您就不走运了。此外,您需要确保采取措施以确保代码可在目标受众的浏览器中正常运行。