JavaScript第六版中的let语句介绍

发布时间:2019-07-22 09:39:17 阅读:102
let 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值。与 var 语句不同的是,let 声明的变量只在其声明的块或子块中可用。

语法

	let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

作用域规则

二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

function varTest() {
    var x = 1;
    if (true) {
        var x = 2;  // 同样的变量!
        console.log(x);  // 2
    }
    console.log(x);  // 2
}

function letTest() {
    let x = 1;
    if (true) {
        let x = 2;  // 不同的变量
        console.log(x);  // 2
    }
    console.log(x);  // 1
}  

简化内部函数代码

当用到内部函数的时候,let会让你的代码更加简单。

	var list = document.getElementById("list");
for (let i = 1; i <= 5; i++) { var item = document.createElement("LI"); item.appendChild(document.createTextNode("Item " + i)); let j = i; item.onclick = function (ev) { console.log("Item " + j + " is clicked."); }; list.appendChild(item); } 

上面这段代码的意图是创建5个li,点击不同的li能够打印出当前li的序号。如果不用let,而改用var的话,将总是打印出 Item 5 is Clicked,因为 j 是函数级变量,5个内部函数都指向了同一个 j ,而 j 最后一次赋值是5。用了let后,j 变成块级域(也就是花括号中的块,每进入一次花括号就生成了一个块级域),所以 5 个内部函数指向了不同的 j 。

在程序或者函数的顶层,let并不会像var一样在全局对象上创造一个属性,比如

	var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined 

重复声明

在同一个函数或块作用域中重复声明同一个变量会引起SyntaxError(语法错误)

	if (x) {
    let foo;
    let foo; // SyntaxError thrown(抛出语法错误).
} 

switch 语句中只有一个块,你可能因此而遇到错误。

	let x = 1;
switch(x) {
  case 0:
    let foo;
    break;
    
  case 1:
    let foo; // SyntaxError for redeclaration.
    break;
} 

然而,需要特别指出的是,一个嵌套在 case 子句中的块会创建一个新的块作用域的词法环境,就不会产生上诉重复声明的错误。

	let x = 1;
switch(x) {
    case 0: {
        let foo;
        break;
    }  
    case 1: {
        let foo;
        break;
    }
} 

let对比var

let的作用域是块,而var的作用域是函数

	var a = 5;
var b = 10;
if (a === 5) {
    let a = 4; // The scope is inside the if-block
    var b = 1; // The scope is inside the function
    console.log(a);  // 4
    console.log(b);  // 1
} 
console.log(a); // 5
console.log(b); // 1 

在for循环中使用let

	for (let i = 0; i < 10; i++) { console.log(i); // 0, 1, 2, 3, 4 ... 9 } console.log(i); // i is not defined 

let语句兼容性

浏览器 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本支持 41.0 (Yes) 44 11 17 ?
暂存死区 ? (Yes) 35 ? ? ?
let expression 未实现 未实现 未实现 未实现 未实现 未实现
let block 未实现 未实现 未实现 未实现 未实现 未实现

相关链接


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"JavaScript第六版中的let语句介绍",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560