ES6学习笔记之let与const用法实例分析


Posted in Javascript onJanuary 22, 2020

本文实例讲述了ES6学习笔记之let与const用法。分享给大家供大家参考,具体如下:

在ES6中不是var,而是通过let来声明变量,用const来声明常量,有如下一些不同:

1、let与const作用域只限于当前代码块{},而var则没有这种限制。

2、使用let、const申明的变量作用域不会被提升。例如:

console.log(str);
var str="var declare";

控制台输出undefined;因为变量申明是在任意代码执行前处理的,在代码区中任意地方声明变量和在最开始(最上面)的地方声明是一样的。也就是说,看起来一个变量可以在声明之前被使用!这种行为就是所谓的“hoisting”,也就是变量提升,看起来就像变量的声明被自动移动到了函数或全局代码的最顶上。注意:仅仅是声明提升了,定义并不会被提升。因此console.log()可以检测到str的声明,但是却没有定义,提示undefined。

console.log(str2);
let str2="let declare";

控制台报错:can't access lexical declaration `str2' before initialization,let不会把声明提升到全局之前,因此在console输出str2时会报错未声明。

3、在相同的作用域下不能申明相同的变量,利用var可以声明两次同一个变量,并且后一个会覆盖前面的声明,而let、const不可以。

4、for循环体现let的父子作用域

var btns=document.querySelectorAll('button');
for (var i=0;i<btns.length;i++){
  btns[i].οnclick=function () {
    alert("第"+i+"个按钮");
  }
}

由于var会提升作用域,当btns[i]在本代码块{}找不到i时,会找到之前的for中的i。在函数循环执行时,并没有触发onclick,i一直++到5。当任意按钮点击的时侯触发onclick,此时i==5,因此无论按那个按钮都会显示“第5个按钮”。

解决方法一:闭包处理      

var btns=document.querySelectorAll('button');
for (var i=0;i<btns.length;i++){
  (function (i) {//通过参数传递i,在另一个函数内的i
    btns[i++].οnclick=function () {
      alert("第"+i+"个按钮");
    }
  })(i);
}

闭包处理:闭包就是一个函数引用另外一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装一个私有变量,i是另一个函数作用域内的变量,不会随着外循环而改变。

方法二:使用let的情况下,会自己区分为两个作用域,每个btns[i]内的函数对应不同的变量i

for (let i=0;i<btns.length;i++){//内部为新的let作用域
  btns[i].οnclick=function (){
    alert("第"+i+"个按钮");
  }
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 #Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 #Javascript
JavaScript设计模型Iterator实例解析
Jan 22 #Javascript
Vue开发环境跨域访问问题
Jan 22 #Javascript
vue中英文切换实例代码
Jan 21 #Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 #Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 #Javascript
You might like
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Python3远程监控程序的实现方法
2019/07/15 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
什么是Python中的顺序表
2020/06/02 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
表彰先进的通报
2014/01/31 职场文书
汽车专业求职信
2014/06/05 职场文书
行政处罚听证告知书
2015/07/01 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫