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 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
javascript实现图片轮播代码
Jul 09 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数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python实现计算最小编辑距离
2016/03/17 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
简单了解Python3里的一些新特性
2019/07/13 Python
技校毕业生的自我评价
2013/12/27 职场文书
中青班党性分析材料
2014/02/16 职场文书
查摆剖析材料范文
2014/09/30 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
2015年度企业工作总结
2015/05/21 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python