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

最新推荐文章于 2024-07-24 23:30:03 发布

像八戒的程序猴

最新推荐文章于 2024-07-24 23:30:03 发布

阅读量224

点赞数

文章标签： es6 let const ECMAScript6

本文链接：https://blog.csdn.net/weixin_42024074/article/details/103395251

版权

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)
				}
			}
			//点击哪个按钮，输出对应的值

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

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

const命令

基本用法

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

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

注：const定义完变量，必须有值，不能后赋值，不能修改！！！

像八戒的程序猴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECMAScript 6(ES6)——let和const命令

Let命令基本用法ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。我们现在来看下面var的例子，当使用var声明的时候，因为var只有全局作用域和函数作用域，所以内层变量覆盖外层变量，if里面的name覆盖了上面的name： var name = 'poller'; if(true){ var name = ...
复制链接

扫一扫