ES6学习笔记之let与const用法实例分析
本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要跟大家分享了一次围绕setTimeout展开的前端面试经验，是一篇有意思的围绕setTimeout展开的前端开发考题，考察了for循环、定时器setTimeout()、JavaScript闭包、匿名函数和Promise等，一不小心你可能就会做错，快来看看你有没有掌握了上面的知识。2017-06-06
JavaScript,作为前端开发的重要语言,可以实现许多复杂的功能,在这篇文章中,我们将一起创建一个交互式的音乐播放器,快跟随小编一起学习一下吧2024-01-01
这篇文章主要介绍了ES6 十大特性的相关资料，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-12-12
本篇文章只要是对js表格字段排序的实例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了微信小程序中data-key属性：数据传输,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
avalon是国内最强大的MVVM框架，最近小编在高购物车的项目，我们是用avalon来实现一些模块的，所以顺其自然的用avalon来实现购物车。接下来通过本文给大家分享Avalonjs 实现简单购物车功能的实例代码，需要的的朋友参考下2017-02-02
很多网站都有此功能，当浏览到底部时都会有一个打印按钮，点击打印按钮就可以完成打印功能，功能非常不错，人性化，下面通过本文给大家介绍JavaScript实现点击按钮就打印的代码，需要的朋友参考下2016-01-01
这是本系列的第三篇文章了，前面2篇网友们反馈回来不少的消息，加上最近2天比较忙，一直没来得及整理，周末了，赶紧给大家整理下发出来，本文讲的是node.js模块2014-05-05
uni.setNavigationBarColor设置字体颜色及背景色无效的4个原因及解决
这篇文章主要给大家介绍了关于uni.setNavigationBarColor设置字体颜色及背景色无效的4个原因及正确解决办法,文中还介绍了uni-app设置页面导航条颜色的实例代码,需要的朋友可以参考下2024-01-01
cookie的大小是受限制的，并且每次请求cookie都会被发送，浪费宽带，cookie还需要指定作用域，不可以跨域调用。cookie的作用是与服务器进行交互，作为http规范的一部分存在，而webstorage仅仅是为了本地“存储”数据而生。2023-07-07
最新评论