在本教程中,我将介绍let
和const
,这是随着ES6的到来为JavaScript添加的两个新关键字。 它们通过提供一种定义块范围变量和常量的方法来增强JavaScript。
本文是涵盖ES6引入的JavaScript新功能的众多内容之一,包括Map和WeakMap , Set和WeakSet ,可用于String , Number和Array的新方法以及可用于函数的新语法 。
let
在ES5之前,JavaScript只有两种类型的作用域:函数作用域和全局作用域。 这给来自其他语言(例如C,C ++或Java)的开发人员造成了很多挫败感和意外行为。 JavaScript缺少块范围,这意味着变量只能在定义它的块内访问。 块是指大括号内的所有内容。 让我们看下面的例子:
function foo() {
var par = 1;
if (par >= 0) {
var bar = 2;
console.log(par); // prints 1
console.log(bar); // prints 2
}
console.log(par); // prints 1
console.log(bar); // prints 2
}
foo();
运行此代码后,您将在控制台中看到以下输出:
1
2
1
2
来自上述语言的大多数开发人员所期望的是,在if
块之外,您无法访问bar
变量。 例如,在C中运行等效代码会导致'bar' undeclared at line ...
中'bar' undeclared at line ...
错误'bar' undeclared at line ...
这是指在if
之外使用bar
。
ES6中这种情况随着块范围的可用性而改变。 ECMA组织成员知道他们无法更改关键字var
的行为,因为这会破坏向后兼容性。 因此,他们决定引入一个名为let
的新关键字。 后者可用于定义变量,将变量的范围限制在声明变量的范围内。 此外,与var
不同,不会提升使用let
声明的变量。 如果在遇到该变量的let
声明之前在块中引用该变量,则将导致ReferenceError
。 但是,这实际上意味着什么? 仅对新手有好处吗? 一点也不!
为了说明您为什么喜欢let
,请考虑以下摘自我的文章5更多JavaScript采访练习的代码 :
var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
nodes[i].addEventListener('click', function() {
console.log('You clicked element #' + i);
});
}
在这里,您可以识别变量声明,变量范围和事件处理程序,这是一个众所周知的问题。 如果您不知道我在说什么,请查看我提到的文章,然后再回来。
感谢ES6,我们可以通过使用let
在for
循环中声明i
变量来轻松解决此问题:
var nodes = document.getElementsByTagName('button');
for (let i = 0; i < nodes.length; i++) {
nodes[i].addEventListener('click', function() {
console.log('You clicked element #' + i);
});
}
Node和所有现代浏览器均支持let
语句。 但是,Internet Explorer 11中有一些陷阱,您可以在ES6兼容性表中阅读这些陷阱。
下面显示了一个演示var
和let
之间差异的实时演示,也可在JSBin获得 :
const
const
解决了开发人员将助记符名称与给定值相关联的普遍需求,以使该值无法更改(或更简单地说,定义一个常量)。 例如,如果您使用的是数学公式,则可能需要创建一个Math
对象。 在此对象内,您要将π和e的值与助记符名称相关联。 const
使您可以实现此目标。 使用它可以创建一个常量,该常量对于声明它的函数可以是全局的或局部的。
用const
定义的const
遵循与变量相同的作用域规则,但是不能重新声明。 常量还与使用let
声明的变量共享一个功能,即它们是块作用域而不是函数作用域的(因此不会被提升)。 万一您在声明常量之前尝试访问它,将会收到ReferenceError
。 如果尝试为用const
声明的变量分配其他值,则会收到TypeError
。
但是请注意, const
与不变性无关 。 正如Mathias Bynens在其博客文章ES2015中所指出的那样, const
与不可变性无关 , const
创建不可变绑定,但并不表示值是不可变的,如以下代码所示:
const foo = {};
foo.bar = 42;
console.log(foo.bar);
// → 42
如果要使对象的值真正不可变,请使用Object.freeze() 。
浏览器对const
支持与let
一样好。 Node和所有现代浏览器均支持语句const
。 但是在这里,Internet Explorer 11也有一些陷阱,您可以在ES6兼容性表中阅读这些陷阱。
const
用法示例如下所示:
'use strict';
function foo() {
const con1 = 3.141;
if (con1 > 3) {
const con2 = 1.414;
console.log(con1); // prints 3.141
console.log(con2); // prints 1.414
}
console.log(con1); // prints 3.141
try {
console.log(con2);
} catch(ex) {
console.log('Cannot access con2 outside its block');
}
}
foo();
下面显示了先前代码的实时演示,并且在JSBin上也可以找到 。
结论
在本教程中,我向您介绍了let
和const
,这是两种声明变量的新方法,这些方法是ES6语言引入的。 尽管var
不会很快消失,但我建议您使用const
并尽可能let
减少代码对错误的敏感性。 通过进一步阅读,您可能还喜欢我们的快速技巧“ 如何在JavaScript中声明变量” ,该技巧进一步探讨了变量声明的机制。