简述ES6新增关键字let与var的区别


Posted in Javascript onAugust 23, 2019

最近看了很多文章,偶然间看到ES6中新增了一个关键字 let ,它具有与 var 关键字相似的功能。一开始使用它时,发现它让我对之前一些习以为常的东西产生了怀疑。

下面先让我们看看它和 var 之间用法的不同

 {
 var a = 10;

 let b = 8;
 }
  a //10 
  b // Referenceerror :b is not defined

上面在代码块中声明了两个变量并分别赋值输出到控制台,结果a的变量成功输出,b的输出结果产生了报错。可见,let声明的变量只在它所在的代码块中产生作用。同时,我们也能想到它最好的使用方法就是在for循环中使用。

下面我们再举个例子来观察它与 var 之间的区别:

 var a = [ ]
for(var i = 0;i<6; i++){


a[i] = function(){



console.log(i);


}

}

console.log("i的值:",i);

a[ 4 ]( );

它的输出结果为:

i 的值:6

6

为什么是 6 呢?一开始我也被吓懵逼了,这有悖于我的常识,以往没注意到的地方,居然这么的low。在我的意识里结果应该 4,而不是 6 。我想了很久也想不明白,以我这种小白的技术,自然是很难搞懂这种资深技术宅的问题。所以,我查了很多资料来解决这个问题,才搞明白。

在for里用 var 声明的 i 是全局变量,在循环外部也可以访问到,在循环体内每次循环都给 i 重新赋一次值,而 i 却是属于全局的,外部的 i 值最终是 6 ,数组 a[ ]指向的 i 始终都是同一个 i,当循环结束时 a [ ] 函数内部的 i 就是最终 i 的结果  6。

如果使用let,声明的变量只在当前代码块中起作用

var a = [ ]

for(let i = 0;i<6; i++){


a[i] = function(){



console.log(i);


}

}

console.log("i的值:",i);

a[ 4 ]( );

 它的输出结果为:

 

i 的值:6

5

上面代码中,变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是5。你可能会问,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。

总结

以上所述是小编给大家介绍的ES6新增关键字let与var的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
小议Javascript中的this指针
Mar 18 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 #Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 #Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 #Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 #Javascript
jquery分页优化操作实例分析
Aug 23 #jQuery
jquery实现的分页显示功能示例
Aug 23 #jQuery
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 #Javascript
You might like
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
php str_pad 函数使用详解
2009/01/13 PHP
精通php的十大要点(上)
2009/02/04 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
php验证手机号码
2015/11/11 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
浅析Python中的多条件排序实现
2016/06/07 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
python实现list由于numpy array的转换
2018/04/04 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python路径的写法及目录的获取方式
2019/12/26 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
关于赌博的检讨书
2014/01/24 职场文书
小学毕业感言150字
2014/02/05 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
市场调查策划方案
2014/06/10 职场文书
考试没考好检讨书
2015/05/06 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS