简述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 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
原生JS实现天气预报
Jun 16 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
微信小程序后台持续定位功能使用详解
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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
Python中优化NumPy包使用性能的教程
2015/04/23 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
怎样自定义一个异常类
2016/09/27 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
公务员的自我鉴定
2013/10/26 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
邀请函的格式
2015/01/30 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL
MySQL自定义函数及触发器
2022/08/05 MySQL