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

所属分类: 网络编程 / JavaScript 阅读数: 1393
收藏 0 赞 0 分享

本文实例讲述了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程序设计有所帮助。

更多精彩内容其他人还在看

jquery实现可拖拽弹出层特效

这篇文章主要介绍了jquery实现可拖拽弹出层特效,代码非常精简,效果非常棒,这里推荐给有需要的小伙伴
收藏 0 赞 0 分享

浅谈 javascript 事件处理

本文向大家简单介绍了javascript的事件处理机制,从事件源,事件操作到事件处理程序都做了简单介绍,并给出了部分示例,这里推荐给大家。
收藏 0 赞 0 分享

jQuery中:reset选择器用法实例

这篇文章主要介绍了jQuery中:reset选择器用法,实例分析了:reset选择器的功能、定义及匹配重置按钮的使用技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

原生javascript实现隔行换色

这篇文章主要介绍了原生javascript实现隔行换色,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery中:button选择器用法实例

这篇文章主要介绍了jQuery中:button选择器用法,实例分析了:button选择器的功能、定义及选取按钮的使用技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery中:file选择器用法实例

这篇文章主要介绍了jQuery中:file选择器用法,实例分析了:file选择器的功能、定义及选取类型为file的<input>元素的使用技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery中:enabled选择器用法实例

这篇文章主要介绍了jQuery中:enabled选择器用法,实例分析了:enabled选择器的功能、定义及选取所有可用元素的使用技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

AngularJS中取消对HTML片段转义的方法例子

这篇文章主要介绍了AngularJS中取消对HTML片段转义的方法例子,在一些需要显示HTML的地方,就要取消AngularJS的转义,本文就介绍了这种方法,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery中:disabled选择器用法实例

这篇文章主要介绍了jQuery中:disabled选择器用法,实例分析了:disabled选择器功能、定义及选取所有禁用的表单元素的技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery中:checked选择器用法实例

这篇文章主要介绍了jQuery中:checked选择器用法,实例分析了:checked选择器的功能、定义及选取选中的复选框或单选按钮时的使用技巧,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多