简述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 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
基于jQuery的表格操作插件
Apr 22 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
js返回顶部实例分享
Dec 21 Javascript
老生常谈的跨域处理
Jan 11 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
vue如何搭建多页面多系统应用
Jun 17 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
自动分页的不完整解决方案
2007/01/12 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
初始Nodejs
2014/11/08 NodeJs
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
详解JavaScript时间格式化
2015/12/23 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
DOM事件探秘篇
2017/02/15 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
详解webpack babel的配置
2018/01/09 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
在python中安装basemap的教程
2018/09/20 Python
对python调用RPC接口的实例详解
2019/01/03 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python 获取项目根路径的代码
2019/09/27 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
python 实现有道翻译功能
2021/02/26 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
"序列点" 是什么
2016/07/29 面试题
银行演讲稿范文
2014/01/03 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
毕业生就业协议书
2014/04/11 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
挂靠协议书
2015/01/27 职场文书
民主评议党员个人总结
2015/02/13 职场文书