ES6篇——var、let、const区别

最新推荐文章于 2023-02-12 11:43:50 发布

置顶 James.Huang1

最新推荐文章于 2023-02-12 11:43:50 发布

阅读量4.2k

点赞数 13

分类专栏： ES6 文章标签： javascript es6 visual studio code

本文链接：https://blog.csdn.net/h907310116/article/details/112139983

版权

ES6 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

es6主要新增了const和let，用来声明变量。但是let和const还是有一些不同的细节。

1.var、let、const的属性区别：

声明	变量提升	作用域	初始值	重复声明
var	是	函数级	不需要	允许
let	否	块级	不需要	不允许
const	否	块级	需要	不允许

2.三个声明变量提升：

 console.log(a);//undefined
 console.log(b);//报错
 console.log(c);//报错
 var a='黄三';
 let b='黑小';
 const c='张小';

这三个声明的区别很明显，因此let和const不支持变量提升，一般是要先声明再使用。

3.三个声明作用域：

var str1='科比';
let str2='詹姆斯';
const str3='乔丹';
if(1 + 1 == 2){
   var str1='易建联';
   let str2='姚明';
   const str3='朱芳雨';
   console.log(str1,str2,str3);//易建联,姚明,朱芳雨
}
console.log(str1);//易建联
console.log(str2);//詹姆斯
console.log(str3);//乔丹

只有let和const有效避免变量覆盖，它们都是块级作用域；var新变量覆盖了旧变量，函数作用域。

另外，块级作用域不支持外部直接访问内部。

if(1 + 1 == 2){
       var str1='易建联';
       let str2='姚明';
       const str3='朱芳雨';
       console.log(str1,str2,str3);//易建联,姚明,朱芳雨
}
console.log(str1);//易建联
console.log(str2);//报错,no defined
console.log(str3);//报错,no defined

3.1 for循环的作用域：

<body>
<!--快捷键：button{按钮$}*5-->
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
    var btns=document.querySelectorAll('button');
        for(var i=0;i<btns.length;i++){
                btns[i].onclick=function () {
                    alert('点击了第'+i+'个');//点击了第5个,5
                }
        }
</script>
</body>

var：每个按钮为5个，点击了每个按钮都是打印“点击了第五个”。这样的话，绝对是不满足开发者的需求。

<body>
<!--快捷键：button{按钮$}*5-->
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
        let btns=document.querySelectorAll('button');
        for(let i=0;i<btns.length;i++){
                btns[i].onclick=function () {
                alert('点击了第'+i+'个');//点击了第0个到第5个,0,1,2,3,4
                }
           }
</script>
</body>

let：可以看到这样的打印，只要每个点击按钮都打印为“点击了N个按钮”，这才是符合预期。

理解：在每一次循环中，let都会重新声明变量，因为let本身都是用块级作用域，所以会记住循环中上一次变量的值，只要是在自己的作用域情况下，循环中每一个值都不会被覆盖掉。

所以推荐在for循环的应用中直接使用let声明。

4.初始值：

只有const声明常量必须赋值。

//err
const name;
name='bbbb';
console.log(name);//报错，因为常量没有赋值

//good
const name='bbbb';
console.log(name);//bbbb

5.三个声明重复声明：

var name1='aaaa';
let name2='bbbb';
const name3='cccc';
name1 ='1111';
name2 ='2222';
name3 ='3333';
console.log(name1);//1111
console.log(name2);//2222
console.log(name3);//报错，不能更改

var和let支持重复声明，只有const不支持重复声明。

另外，const 对于数组和对象的元素可以修改，不算做对常量的修改，这样不会报错。

//数组
const TEAM=['UZI','MXLG','Ming','Xiaohu']
TEAM.push('Meiko');//添加Meiko到数组内
console.log(TEAM);//UZI,MXLG,Ming,Xiaohu,Meiko

//对象
const t={name:'黄小'};
t.name='黑小';
console.log(t);//黑小

为何要学习ES6的let和const？对于JavaScript是个弱类型，很好地提升它的性能，可以减少大多数奇怪的问题。现在大多数都使用let和const声明变量。

以上就是这文章的内容了，不断更新中.....给知识充电中。

欢迎各位大佬评论、点赞和收藏！Thanks

James.Huang1

关注

13
点赞
踩
15

收藏

觉得还不错? 一键收藏
7
评论
ES6篇——var、let、const区别

es6主要新增了const和let，用来声明变量。但是let和const还是有一些不同的细节。1.var、let、const的属性区别：声明变量提升作用域初始值重复声明 var 是函数级不需要允许 let 否块级
复制链接

扫一扫