了解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 相关文章推荐
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
vuex的使用和简易实现
Jan 07 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
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下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
php数组随机排序实现方法
2015/06/13 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
python3实现基于用户的协同过滤
2018/05/31 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
搬家公司的创业计划书
2014/01/01 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
教师远程培训心得体会
2016/01/09 职场文书
Golang jwt身份认证
2022/04/20 Golang