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

前端  /  管理员 发布于 4年前   370

本文实例讲述了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
由于var会提升作用域，当btns[i]在本代码块{}找不到i时，会找到之前的for中的i。在函数循环执行时，并没有触发onclick，i一直++到5。当任意按钮点击的时侯触发onclick，此时i==5，因此无论按那个按钮都会显示“第5个按钮”。
解决方法一：闭包处理      
var btns=document.querySelectorAll('button');for (var i=0;i
闭包处理：闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量,i是另一个函数作用域内的变量，不会随着外循环而改变。
方法二：使用let的情况下，会自己区分为两个作用域，每个btns[i]内的函数对应不同的变量i
for (let i=0;i
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools..net.cn/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
                                                                        
您可能感兴趣的文章:
JavaScript ES6中const、let与var的对比详解
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
深入浅出ES6之let和const命令
ES6新特性一： let和const命令详解
ES6入门教程之let和const命令详解
ES6入门教程之let、const的使用方法
ES6中let 和 const 的新特性
ES6 let和const定义变量与常量的应用实例分析
ES6中let、const的区别及变量的解构赋值操作方法实例分析
详解javascript中var与ES6规范中let、const区别与用法