简述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 相关文章推荐
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
js实现轮播图特效
May 28 Javascript
javascript实现前端分页功能
Nov 26 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小偷相关截取函数备忘
2010/11/28 PHP
PHP新手入门学习方法
2011/05/08 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Python3使用requests发闪存的方法
2016/05/11 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
用python制作个音乐下载器
2021/01/30 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
印尼网上商店:Alfacart.com
2019/03/11 全球购物
天鹅的故事教学反思
2014/02/04 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript
Python实现科学占卜 让视频自动打码
2022/04/09 Python