ES6（2）：关于 let、var、const，三者区别

最新推荐文章于 2022-10-28 09:50:16 发布

小R.

最新推荐文章于 2022-10-28 09:50:16 发布

阅读量110

点赞数

分类专栏： # ES5 ES6~ES11

本文链接：https://blog.csdn.net/qq_43652492/article/details/108678045

版权

ES5 ES6~ES11 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

一、`var`声明的变量会挂载在window上，而`let`和`const`声明的变量不会

var a = 521;
console.log(a,window.a);    // 521   521

let b = 521;
console.log(b,window.b);    // 521  undefined

const c = 521;
console.log(c,window.c);    // 521  undefined

在这里插入图片描述

二、同一作用域下`let` 和`const`不能声明同名变量，而var可以

let name = 'Tom';
let name = 'Jack';
console.log(name);

在这里插入图片描述

const name = 'Tom';
const name = 'Jack';
console.log(name);

在这里插入图片描述

var name = 'Tom';
var name = 'Jack';
console.log(name);

在这里插入图片描述

三、`var`声明变量存在变量提升，`let`和`const`不存在变量提升

console.log(career);  //undefined
var career = '学生';

在这里插入图片描述

console.log(career);
let career = '学生';

在这里插入图片描述

console.log(career);
const career = '学生';

在这里插入图片描述

四、`let`和`const`声明形成块作用域，只在代码块内有效

{
	let girl = 'Lili';
}
console.log(girl);

在这里插入图片描述
换成var不报错：

{
	var girl = 'Lili';
}
console.log(girl);

在这里插入图片描述

五、`let`补充：不影响作用域链

 {
	let school = '尚硅谷';
	function fn(){
		console.log(school);
}
fn();
}

在这里插入图片描述

六、`const`补充：声明的变量不可修改，而且必须赋初始值

 const a;

在这里插入图片描述

const a = 10;
a = 20;
console.log(a);

在这里插入图片描述

七、`let`示例

<div class="container">
   <h2 class="page-header">点击切换颜色</h2>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
</div>

<style>
   .item {
        width: 100px;
        height: 50px;
        border: solid 1px rgb(42, 156, 156);
        float: left;
        margin-right: 10px;
    }
</style>

<script>
	//获取div元素对象
	let items = document.getElementsByClassName('item');

	//遍历并绑定事件
	for(let i = 0;i<items.length;i++){
	    items[i].onclick = function(){
	        //修改当前元素的背景颜色
	        // this.style.background = 'pink';   // 写法一
	        items[i].style.background = 'pink';  //写法二
	    }
	}
</script>

在这里插入图片描述
我们可以看到用let是可以实现点击效果的，但是如果改成 var，再用第二种写法 items[i].style.background = 'pink';就不可行了，大家可以试试。

这是因为全局变量i出现了问题，改成 var 之后运行的代码其实是这样的，

{
	var i = 0;
}
{
	var i = 1;
}
{
	var i = 2;
}

三次循环之后，i做了个自增，此时i为3，因为没有块级作用域，所以i一直在全局中存在，可以打印一下i的值，

for(var i = 0;i<items.length;i++){
   items[i].onclick = function(){
        //修改当前元素的背景颜色
        //this.style.background = 'pink';
        items[i].style.background = 'pink';
    }
}
// {
//     var i = 0;
// }
// {
//     var i = 1;
// }
// {
//     var i = 2;
// }
console.log(window.i);