简述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 相关文章推荐
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
jquery预加载图片的方法
May 27 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
ajax异步请求详解
Jan 06 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
JS面试题中深拷贝的实现讲解
May 07 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 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
php中的一个中文字符串截取函数
2007/02/14 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
stripos函数知识点实例分享
2019/02/11 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
Python 正则表达式操作指南
2009/05/04 Python
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
常见的python正则用法实例讲解
2016/06/21 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
Python绘图实现显示中文
2019/12/04 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
某公司.Net方向面试题
2014/04/24 面试题
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
物流管理专业应届生求职信
2013/11/21 职场文书
初中学生评语大全
2014/04/24 职场文书
工程负责人任命书
2014/06/06 职场文书
生物科学专业自荐书
2014/06/20 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
让子弹飞观后感
2015/06/11 职场文书
开网店计划分析
2019/07/30 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers
python中数组和列表的简单实例
2022/03/25 Python