简述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 相关文章推荐
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
搞定immutable.js详细说明
May 02 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
canvas实现钟表效果
Feb 13 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
React四级菜单的实现
Apr 08 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
JavaScript中获取元素索引的函数
2010/09/10 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
js验证密码强度解析
2020/03/18 Javascript
Python中的map、reduce和filter浅析
2014/04/26 Python
python中的协程深入理解
2019/06/10 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
关于工资低的辞职信
2014/01/14 职场文书
上课迟到检讨书
2014/01/19 职场文书
旅游个人求职信范文
2014/01/30 职场文书
运动会获奖感言
2014/02/11 职场文书
银行简历自我评价
2014/02/11 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
mysql知识点整理
2021/04/05 MySQL
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS