浅谈ES6 let命令

淡淡的烟草味﹌ 2022-06-18 04:12 220阅读 0赞

ES5只有两种声明变量的方式：var和function，ES6还添加了两种常用的声明变量的方式：let和const。

const的介绍请见：[http://blog.csdn.net/zhouziyu2011/article/details/68484960][http_blog.csdn.net_zhouziyu2011_article_details_68484960]

下面介绍ES6的let命令：

ES6新增了let命令，用来声明变量，它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

1、for循环的计数器，就很合适使用let。

var a = [];
    for (var i = 0; i < 10; i++) {
    	a[i] = function() {
    		console.log(i);
    	}
    }
    a[6](); // 10

变量i是var声明的，在全局范围内有效，所以每次循环新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。

var a = [];
    for (let i = 0; i < 10; i++) {
    	a[i] = function() {
    		console.log(i);
    	}
    }
    a[5](); // 5

使用let，声明的变量仅在块级作用域内有效，最后输出的是5。

关于块级作用域的介绍请见：[http://blog.csdn.net/zhouziyu2011/article/details/68484534][http_blog.csdn.net_zhouziyu2011_article_details_68484534]

2、let不存在变量提升：let不像var那样会发生变量提升，所以，变量一定要在声明后使用，否则报错。

console.log(i); // 输出：undefined
    console.log(j); // 报错
    var i = 5;
    let j = 10;

3、暂时性死区：

只要块级作用域存在let命令，它所声明的变量就绑定到这个区域，不再受外部的影响。

var i= 6;
    if (i > 5) {
    	i = 3; // 报错
    	let i;
    }

ES6明确规定，若块作用域中存在let和const命令，则它们声明的变量，从一开始就形成了封闭作用域，凡是在声明之前就使用这些变量，就会报错。

在代码块内，使用let命令声明变量之前，该变量都是不可用的（不可赋值，不可访问等），这称为“暂时性死区”。

暂时性死区使得typeof操作不一定安全，所以在let声明之前，使用typeof操作符会报错。而在let出现之前，typeof是百分之百安全的，永远不会被报错，即使变量没有被声明，typeof也会返回undefined。

if (true) {
    	alert(typeof x); // 报错
    	alert(typeof y); // undefined
    	let x;
    }

暂时性死区的本质：只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

ES6规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止变量在声明前就使用该变量，从而导致意料之外的错误。这类错误在ES5中很常见。

4、不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。

function func() { // 报错
    	var i= 1;
    	let i = 1;
    }
    function func() { // 报错
    	let i= 1;
    	let i = 1;
    }

不能在函数内部重新声明参数。

function func(arg) { // 报错
    	let arg;
    }
    function func(arg) { // 不报错
    	{
    		let arg;
    	}
    }

有关let和const的对比请见：[http://blog.csdn.net/zhouziyu2011/article/details/71366078][http_blog.csdn.net_zhouziyu2011_article_details_71366078]

[http_blog.csdn.net_zhouziyu2011_article_details_68484960]: http://blog.csdn.net/zhouziyu2011/article/details/68484960
[http_blog.csdn.net_zhouziyu2011_article_details_68484534]: http://blog.csdn.net/zhouziyu2011/article/details/68484534
[http_blog.csdn.net_zhouziyu2011_article_details_71366078]: http://blog.csdn.net/zhouziyu2011/article/details/71366078