了解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 相关文章推荐
动态为事件添加js代码示例
Feb 15 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
前端面试知识点目录一览
Apr 15 Javascript
JS实现纵向轮播图(初级版)
Jan 18 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
使用图灵api创建微信聊天机器人
2015/07/23 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
小程序input数据双向绑定实现方法
2019/10/17 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
店长岗位的工作内容
2013/11/12 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
会议主持人开场白台词
2015/05/28 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
送给客户微信问候语!
2019/07/04 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
纯html+css实现打字效果
2021/08/02 HTML / CSS
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
ipad隐藏软件app图标方法
2022/04/19 数码科技