简述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 HTML中的table
Apr 15 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
Javascript获取某个月的天数
May 30 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
uni app仿微信顶部导航条功能
Sep 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防止sql注入的方法详解
2017/02/20 PHP
PHP分享图片的生成方法
2018/04/25 PHP
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
javascript工具库代码
2012/03/29 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
js实现分页功能
2017/05/24 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
详解JS模块导入导出
2017/12/20 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
python的help函数如何使用
2020/06/11 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
外企C语言笔试题
2013/11/10 面试题
家长会邀请书
2014/01/25 职场文书
客服专员岗位职责
2014/02/28 职场文书
会计核算科岗位职责
2014/03/19 职场文书
单位委托书范本
2014/04/04 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
新文化运动的口号
2014/06/21 职场文书
体育专业求职信
2014/07/16 职场文书
英雄儿女观后感
2015/06/09 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
javaScript Array api梳理
2021/03/31 Javascript
总结Python连接CS2000的详细步骤
2021/06/23 Python