博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6之let命令妙用
阅读量:7098 次
发布时间:2019-06-28

本文共 813 字,大约阅读时间需要 2 分钟。

很多人都听说过ES6(也就是ECMAScript的新一代标准)并且对她充满了向往,下面通过一个ES6中小知识点——let命令,来解开她的神秘面纱,让大家初步认识一下ES6的语法规范。

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

1)块级作用域有效

2)不允许重复声明
3)不存在变量作用域提升

1、块级作用域有效

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

图片描述

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

2、不允许重复声明

使用let声明的变量不允许出现同名,同名就报错。使用var的话就没有这个限制。
图片描述

3、不存在变量作用域提升

使用let时,必须先声明再使用,如果在声明之前使用就会报错,用var时则会显示undefined。

图片描述

4、实例

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

图片描述

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

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

图片描述

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

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

转载地址:http://ebeql.baihongyu.com/

你可能感兴趣的文章
js选择栏select插件 简易
查看>>
【转】养成一个SQL好习惯带来一笔大财富
查看>>
BZOJ1087[SCOI2005]互不侵犯——状压DP
查看>>
Scala 学习笔记之集合(8) Try和Future
查看>>
课后笔记--html
查看>>
openresty安装
查看>>
祝贺下,我终于在网上有个家啦~~~
查看>>
8086汇编——课堂笔记整理4
查看>>
按照Right-BICEP要求设计四则运算2程序的单元测试用例
查看>>
SpringMVC-Handler-Return Values返回值
查看>>
KVM网络桥接模式解说
查看>>
WebApp开发之--"rem"单位(转)
查看>>
TOPCODER->Practice Room->SRAM 144 DIV 1 (550)
查看>>
mysql 远程连接速度慢的解决方案
查看>>
android软键盘挡住输入框问题解决方法
查看>>
Angular企业级开发(10)-Smart Table插件开发
查看>>
POJ-3295 Tautology 构造法
查看>>
HDU-3573 Buy Sticks
查看>>
验证码的封装
查看>>
javascript与服务器1
查看>>