了解JavaScript中let语句


Posted in Javascript onMay 30, 2019

使用let语句,允许你在JavaScript中创建块范围局部变量。let语句是在JavaScript的ECMAScript 6标准中引入的。

在你往下了解let语句之前,我建议你先查看基于Infragistics jQuery库的Ignite UI,它可以帮助你更快地编写和运行Web应用程序。你可以使用JavaScript库的Ignite UI来快速解决HTML5,jQuery,Angular,React或ASP.NET MVC中复杂的LOB需求。(你可以在这里下载Ignite UI的免费试用版。)

在ECMAScript 6之前,JavaScript有三种类型的范围:

  • 全局范围
  • 函数范围
  • 词汇范围

为了详细探索let语句,请细想下面的代码段:

function foo() {
var x = 9;
if (x > 5) {
var x = 7;
console.log("Value of x in if statement = " + x);
}
console.log("Value of x outside if statement = " + x);
}
foo();

以上代码得到的输出:

了解JavaScript中let语句

在上面的代码中,我们使用var语句声明变量x。因此,变量x的范围是函数范围。if语句内的变量x 就是if语句外创建的变量x 。因此,在你修改if语句块内变量x的值时,也会修改函数中变量x的所有引用的值。

为了避免这种情况,你需要使用块级别范围,let语句允许你创建块范围的局部变量。

修改上面的代码片段,使用let语句声明变量:

function foo() {
var x = 9;
if (x > 5) {
let x = 7;
console.log("Value of x in if statement = " + x);
}
console.log("Value of x outside if statement = " + x);
}
foo();

在上面的代码段中,我们使用let语句来声明范围级局部变量x。因此,在if语句内更新变量x的值不会影响if语句外的变量x的值。

下面是上述代码的输出:

了解JavaScript中let语句

与使用函数范围(或全局范围)声明的变量不同,使用let声明的变量是块范围的:它们只存在于它们定义的块中。

变量提升

使用let声明的变量提升不同于使用var声明的变量。因此,使用let声明的变量没有变量提升,这意味着使用let声明的变量不会移动到执行上下文的顶部。

为了更好地理解这一点,请看以下这段代码:

function foo() {
console.log(x);
console.log(y);
var x = 9;
let y = 67;
}
foo();

作为输出,你将获得变量y的ReferenceError,变量y使用let语句声明。使用let声明的变量不会提升到执行上下文之上。

了解JavaScript中let语句

重新声明变量

你不能在同一个函数或块中使用let重新声明一个变量。这样做会出现语法错误。请看以下代码:

function foo() {
if(true){
let x = 9;
let x = 89; 
}
}
foo();

运行上面的代码会出来一个语法错误,如下所示:

了解JavaScript中let语句

暂时性死区

有时,使用let声明的变量会导致暂时性死区。在以下代码中,let x=x+67 将抛出x未定义的异常。

之所以会出现这个错误,是因为表达式(x + 67)求的是if块范围内局部变量x的值,而不是函数范围内局部变量x的值。运行上面的代码,你会得到这样一个异常:

了解JavaScript中let语句

你可以通过移动声明变量到表达式的上面一行来修复上述错误,如下所示:

块级范围界定是任何编程语言最重要的功能之一,并且随着ECMAScript 6中let语句的引入,JavaScript现在也有了这个功能。使用let语句,允许创建一个作用域在块范围内的变量。这可以解决许多问题,例如全局范围变量的意外修改,闭包中的局部变量,以及帮助编写更清晰的代码。

英文原文:Easy JavaScript, Part 1: Learn the 'let' Statement

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
js控制input框只读实现示例
Jan 20 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
koa+jwt实现token验证与刷新功能
May 30 #Javascript
深入理解JavaScript 箭头函数
May 30 #Javascript
socket在egg中的使用实例代码详解
May 30 #Javascript
深入了解JavaScript 私有化
May 30 #Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 #jQuery
Vue CL3 配置路径别名详解
May 30 #Javascript
Vue CLI3中使用compass normalize的方法
May 30 #Javascript
You might like
php.ini 中文版
2006/10/28 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
python+requests接口自动化框架的实现
2020/08/31 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
香港零食网购:上仓胃子
2020/06/08 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
客服部班长工作责任制
2014/02/25 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js