ES6之let命令妙用

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6之let命令妙用脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
很多人都听说过ES6(也就是ecmascript的新一代标准)并且对她充满了向往,下面通过一个ES6中小知识点——let命令,来解开她的神秘面纱,让大家初步认识一下ES6的语法规范。

let命令属于ES6中的一个基本语法,与原有Javascript中的var的功能一样,都是用来声明一个变量。但是,他拥有了一些新的特性和使用规范:

1)块级作用域有效
2)不允许重复声明
3)不存在变量作用域提升

1、块级作用域有效

使用let声明的变量作用域范围只在花括号{}内有效,而使用VAR声明的变量则在花括号之外也可以使用。

ES6之let命令妙用

在花括号中用var声明了一个a变量,用let声明了一个b变量。在花括号之外访问时,a可以正常访问到1,但是b却不能。原因let声明的变量超出{}之后,就访问不到了。

2、不允许重复声明
使用let声明的变量不允许出现同名,同名就报错。使用var的话就没有这个限制。

ES6之let命令妙用

3、不存在变量作用域提升
使用let时,必须先声明再使用,如果在声明之前使用就会报错,用var时则会显示undefined。

ES6之let命令妙用

4、实例

 下面是一道非常经典的面试题,问点击按钮打印出来的结果是什么

ES6之let命令妙用

在这个例子中,点击这3个按钮打印的都是:3,原因就是此时的i是一个全局变量i,按钮只是拿到了i的引用。也就是说按钮的i指向的同一个对象i,那么i的变化会同时影响到这三个按钮。i进过训话后变成了3,所以点击按钮打印出来的就都是3了。

但是我们想要的结果是:依次打印0、1、2怎么办?此时就是可以使用let命令,修改一下代码看一下:

ES6之let命令妙用

在代码中只用把 var i 改成 let i 即可,现在在for循环外打印i已经获取不到了,i已经不再是全局变量。此时点击按钮看到打印的结果为:0 1 2 ,达到了我们的预期。

这就是ES6中的let命令大家学会了吗?当然let只是ES6语法规范中的冰山一角,上海尚学堂web前端培训将为您奉献更多的精彩实用的前端相关知识!

脚本宝典总结

以上是脚本宝典为你收集整理的ES6之let命令妙用全部内容,希望文章能够帮你解决ES6之let命令妙用所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。