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 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
List Installed Hot Fixes
Jun 12 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
js实现九宫格布局效果
May 28 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中处理模拟rewrite 效果
2006/12/09 PHP
PHP的分页功能
2007/03/21 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP实现微信退款功能
2018/10/02 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
快速了解Python中的装饰器
2018/01/11 Python
详解python中的线程
2018/02/10 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
酒吧创业计划书
2014/01/18 职场文书
学生感冒英文请假条
2014/02/04 职场文书
教师师德承诺书
2014/03/26 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python
Python编写冷笑话生成器
2022/04/20 Python