【JavaScript】ES6——let、var的区别和情况举例

黄阿玛＆Erika

已于 2023-07-17 20:49:41 修改

阅读量69

点赞数

文章标签： javascript 前端开发语言 es6

于 2023-07-17 20:44:10 首次发布

本文链接：https://blog.csdn.net/qq_59642869/article/details/131770841

版权

ES6——let声明变量

1. 块级作用域
- 1.1 var变量污染全局举例
2. 不允许重复声明
- - 情况1
  - 情况2
3. 变量提升没有了

1. 块级作用域

var可能会导致变量被污染，let只在块级作用域内起作用。
var

if (true) {
	var i = 100;
}
console.log(i) // 100

let

if (true) {
	let i = 100;
}
console.log(i) // 报错

1.1 var变量污染全局举例

需求：遍历列表，分别给每一个ul绑定点击事件，点击哪一个就弹出哪一个的索引值。

<body>
   <ul>
       <li>1111</li>
       <li>2222</li>
       <li>3333</li>
   </ul>
    <script>
        var oil = document.querySelectorAll("ul li");
		for ( var i = 0; i < oil.length; i++ ) {
			oil[i].onclick = function() {
				console.log(i);
			}
		}
    </script>
</body>

最终是——不管你点击哪一个，最后控制台显示的结果都是3（数组oil的长度）

1.1.1 原因：

for循环一瞬间就执行结束，而点击属于 异步操作 。
此时i已经暴露于全局，for循环结束，i还在，所以点击的时候，其实点击的是全局的值。

1.1.2 解决方案一：

给每一个节点自定义一个属性，把i赋值给这个属性，打印这个属性的值。

 <script>
        var oil = document.querySelectorAll("ul li");
		for ( var i = 0; i < oil.length; i++ ) {
			oil[i].index = i; // 新添加代码
			oil[i].onclick = function() {
				// console.log(i);
				console.log(this.index); // 新添加代码
			}
		}
    </script>

1.1.3 解决方案二：

直接把var改成let

 <script>
        var oil = document.querySelectorAll("ul li");
		for ( let i = 0; i < oil.length; i++ ) {
			oil[i].onclick = function() {
				console.log(i);
			}
		}
    </script>

1.1.4 解释：

let让每一个for循环的i都是新的值，而在click事件中，每一个i都没有被释放，打印的就是每一次循环中的i的值。

2. 不允许重复声明

var

<script>
        var a = 1;
        var a = 2;
        console.log(a)  // 不报错，打印 2
</script>

let

情况1

<script>
        var a = 1;
        let a = 2;
        console.log(a)  // 报错，不允许重复声明
</script>

情况2

<script>
        let a = 1;
        let a = 2;
        console.log(a)  // 报错，不允许重复声明
</script>

3. 变量提升没有了

后面补充

黄阿玛＆Erika

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【JavaScript】ES6——let、var的区别和情况举例

let和var的区别
复制链接

扫一扫