简述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 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
Ext 今日学习总结
Sep 19 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
vue升级之路之vue-router的使用教程
Aug 14 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 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
QueryPath PHP 中的jQuery
2010/04/11 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
在PHP中使用redis
2013/11/04 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
最简单的js图片切换效果实现代码
2011/09/24 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
python随机生成库faker库api实例详解
2019/11/28 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
高级销售员求职信
2013/10/25 职场文书
经典公益广告词
2014/03/13 职场文书
临床护理求职信
2014/04/26 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
人生遥控器观后感
2015/06/11 职场文书
给朋友的赠语
2015/06/23 职场文书
合作意向书怎么写
2019/06/24 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
Pandas 稀疏数据结构的实现
2021/07/25 Python
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL