ECMAScript 6(ES6)——let和const命令

Let命令

基本用法

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

我们现在来看下面var的例子,当使用var声明的时候,因为var只有全局作用域和函数作用域,所以内层变量覆盖外层变量,if里面的name覆盖了上面的name:

			var name = 'poller';
			if(true){
     
				var name = 'joke';
				console.log(name);//joke
			}
			console.log(name);  //joke

当我们用Let代替var时,可以发现:

			let name = 'poller';
			if(true){
     
				let name = 'joke';
				console.log(name);//joke
			}
			console.log(name);  //poller

此时,内层变量没有覆盖外层变量,这是因为let实际上为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块内有效。

?问题来了,这样有什么好处呢?
场景一:

var带来的不合理场景就是用来计数的循环变量泄露为全局变量:

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

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

当使用Let时:

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

此时我们会发现,a数组中索引为4的输出结果是4,说明每一次循环,i 不会覆盖掉新的 i 的值

应用案例:
点击多个按钮,分别输出对应的值;

	<body>
		<button class="clickBox">0</button>
		<button class="clickBox">1</button>
		<button class="clickBox">2</button>
	</body>

用var如下:

			var clickBoxs = document.querySelectorAll('.clickBox')
			for(var i = 0; i < clickBoxs.length; i++) {
     
				clickBoxs[i].onclick = function() {
     
					console.log(i)
				}
			}
			//此時不管点击哪个按钮,都是输出的最大值

这时候只能使用闭包解决这个问题,但是用let就不需要闭包

用let如下:

			var clickBoxs = document.querySelectorAll('.clickBox')
			for(let i = 0; i < clickBoxs.length; i++) {
     
				clickBoxs[i].onclick = function() {
     
					console.log(i)
				}
			}
			//点击哪个按钮,输出对应的值

注:这就是块级作用域的好处

  1. let没有预解析,不存在变量提升,要先定义完,再使用;
  2. 不能重复定义变量;
  3. 有个特殊的地方需要说明下,for循环中,for(let ......)这里的相当于父级作用域,for(){let...}这里的相当于子级作用域。

const命令

基本用法

const也用来声明变量,但是声明的是常量。一旦声明,常量的值就不能改变。

			const PI = 8888;
            PI = 23 //TypeError: Assignment to constant variable.

注:const定义完变量,必须有值,不能后赋值,不能修改!!!

你可能感兴趣的:(es6,let,const,ECMAScript6)