了解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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
Firefox window.close()的使用注意事项
Apr 11 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 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
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
python使用htmllib分析网页内容的方法
2015/05/08 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
CLR与IL分别是什么含义
2016/08/23 面试题
大型活动策划方案
2014/01/12 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
村安全生产责任书
2014/08/25 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
推销搭讪开场白
2015/05/28 职场文书