了解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 相关文章推荐
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
js网页右下角提示框实例
Oct 14 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
使javascript也能包含文件
2006/10/26 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
python实现媒体播放器功能
2018/02/11 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
python获取Linux发行版名称
2019/08/30 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
战略性融资合作协议书范本
2014/10/17 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers
Spring中bean集合注入的方法详解
2022/07/07 Java/Android