ECMAScript自在学习 JavaScript——第 1 局部:了然 let 语句

行使let语句,允许你在JavaScript中创设块范围部分变量。let语句是在JavaScript的ECMAScript
6正式中引入的。

在您往下精晓let语句从前,我提议你先查看基于Infragistics jQuery库的Ignite
UI,它可以扶持您更快地编写和运作Web应用程序。你可以选择JavaScript库的Ignite
UI来连忙化解HTML5,jQuery,Angular,React或ASP.NET
MVC中复杂的LOB需求。(你可以在这里下载Ignite
UI的免费试用版。)

在ECMAScript 6从前,JavaScript有两种档次的界定:

  • 全局范围
  • ECMAScript,函数范围
  • 词汇范围

为了详细探索let语句,请细想上边的代码段:

function foo() {
    var x = 9;
    if (x > 5) {
        var x = 7;
        console.log("Value of x in if statement = " + x);
    }
    console.log("Value of x outside if statement = " + x);
}
foo();

上述代码拿到的出口:

 

ECMAScript 1

image

在下面的代码中,大家应用var语句声明变量x。由此,变量x的限量是函数范围。if语句内的变量x
就是if语句外创制的变量x
。由此,在您改改if语句块内变量x的值时,也会修改函数中变量x的装有引用的值。

为了防止那种情况,你需要采取块级别限制,let语句允许你创设块范围的局部变量。

修改上边的代码片段,使用let语句讲明变量:

function foo() {
    var x = 9;
    if (x > 5) {
        let x = 7;
        console.log("Value of x in if statement = " + x);
    }
    console.log("Value of x outside if statement = " + x);
}
foo();

在下边的代码段中,我们接纳let语句来声称范围级局部变量x。由此,在if语句内更新变量x的值不会潜移默化if语句外的变量x的值。

下边是上述代码的出口:

 

ECMAScript 2

image

与利用函数范围(或全局范围)阐明的变量不同,使用let表明的变量是块范围的:它们只存在于它们定义的块中。

变量提高

行使let注脚的变量提高不同于使用var注明的变量。因而,使用let阐明的变量没有变量提高,这意味着使用let表明的变量不会移动到执行上下文的顶部。

为了更好地明白这或多或少,请看之下这段代码:

function foo() {
    console.log(x);
    console.log(y);
    var x = 9;
    let y = 67;
}
foo();

用作出口,你将取得变量y的ReferenceError,变量y使用let语句表明。使用let讲明的变量不会升级到实践上下文之上。

 

ECMAScript 3

image

重复表明变量

您无法在同一个函数或块中运用let重新注解一个变量。这样做会现出语法错误。请看之下代码:

function foo() {
    if(true){
        let x = 9;
        let x = 89; 
    }
}
foo();

运转方面的代码会出去一个语法错误,如下所示:

 

ECMAScript 4

image

暂行死区

偶然,使用let注脚的变量会造成暂时死区。在以下代码中,let x=x+67
将抛出x未定义的那些。

于是相会世这么些错误,是因为表达式(x +
67)求的是if块范围内有些变量x的值,而不是函数范围内局部变量x的值。运行方面的代码,你会博得这样一个不行:

 

ECMAScript 5

image

你可以由此运动注明变量到表明式的地点一行来修补上述失实,如下所示:

块级范围限定是另外编程语言最关键的效率之一,并且随着ECMAScript
6中let语句的引入,JavaScript现在也有了这么些效用。使用let语句,允许创制一个效能域在块范围内的变量。这足以缓解广大题材,例如全局范围变量的竟然修改,闭包中的局部变量,以及扶助编写更清楚的代码。

迎接插足学习交换群569772982,我们齐声念书交换。