简述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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
js闭包用法实例详解
Dec 13 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
介绍一下28个JS常用数组方法
May 06 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
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
Python机器学习logistic回归代码解析
2018/01/17 Python
python实现爬取图书封面
2018/07/05 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python实现控制COM口的示例
2019/07/03 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
python动态视频下载器的实现方法
2019/09/16 Python
python3 求约数的实例
2019/12/05 Python
python烟花效果的代码实例
2020/02/25 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
python实现图像拼接功能
2020/03/23 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
python实现人工蜂群算法
2020/09/18 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
建筑设计师岗位职责
2013/11/18 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
2015年重阳节主持词
2015/07/04 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript