文档章节

ECMAScript 6 let 命令介绍

AAASSSSddd
 AAASSSSddd
发布于 2016/11/30 18:45
字数 1264
阅读 27
收藏 0

一、使用 let 命令来声明变量的总结

ES6新增了let命令 ,它是一个块级域的局部变量,并且可以给它一个初始化值。let允许把变量的作用域限制在块级域中。与 var 不同处是:var申明变量要么是全局的,要么是函数级的,而无法是块级的。let声明的变量作用域包含定义它的块以及任何包含的子块中。在这方面,letvar非常像。它们之间主要的区别在于一个var变量的作用域是整个封闭函数。

  • 它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
  • let命令声明的变量在循环体内的时候每次都是一个新的变量。
  • 不存在变量提升。
  • 暂时性死区(只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。ES6明确规定,如果区块中存在letconst命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错)。
  • 不允许重复声明。

 二、let声明的变量只在它所在的代码块有效

{
	let a = 10;
	var b = 1;
}
//console.log(b);		//1
//console.log(a);		//not defined
//for循环的计数器,就很合适使用let命令。
//计数器i只在for循环体内有效,在循环体外引用就会报错。
for (let i = 0; i < 10; i++) {
	//console.log(i);
}
//console.log(i); //not defined
	

三、let命令声明的变量在循环体内的时候每次都是一个新的变量

var a = [];

for (let j = 0; j < 10; j++) {
	a[j] = function(){
		return j;
	}
}

a[5]();		//5
a[4]();		//4
//上面代码中,变量j是let声明的,当前的j只在本轮循环有效,所以每一次循环的j其实都是一个新的变量,所以最后输出的是j。

四、不存在变量提升


console.log(foo);	//undefined
console.log(bar);	//not defined
var foo = 2;
let bar = 2;

五、暂时性死区

//ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。
//凡是在声明之前就使用这些变量,就会报错。
//总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。
var temp;
	
if( true ){
	temp = 'abc';		//temp is not defined(…)
	let temp;
}
var temp;
		
if( true ){
	//temp = 'abc';	        //not defined
	//console.log(temp);	//not defined
	
	let temp;
	console.log(temp);		//undefined
	temp =  3;		
	console.log(temp);		//3
}
//“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。
typeof x;		//not defined
let x;
//上面代码中,undeclared_variable是一个不存在的变量名,结果返回“undefined”。
//所以,在没有let之前,typeof运算符是百分之百安全的,永远不会报错。现在这一点不成立了。
//这样的设计是为了让大家养成良好的编程习惯,变量一定要在声明之后使用,否则就报错。
console.log(typeof undeclared_variable);	//undefined

在 ECMAScript  2015中, let将会提升这个变量到语句块的顶部。然而,在这个语句块中,在变量声明之前引用这个变量会导致一个ReferenceError。 因为let变量 在"暂存死区" (从块的开始到声明这段)。总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

六、不允许重复声明

//Identifier 'a' has already been declared
(function (){
	let a = 10;
	var a = 1;
}());

//Identifier 'b' has already been declared
(function (){
	let b = 10;
	let b = 1;
}());
//因此,不能在函数内部重新声明参数。
//Identifier 'arg' has already been declared
function func(arg) {
	let arg; // 报错
}
switch (x) {
  case 0:
    let foo;
    break;
    
  case 1:
    let foo; // Identifier 'foo' has already been declared
    break;
}

 

//let后跟一个函数传递的参数时将导致循环内部报错。
function go(n){
  for (let n of n.a) { // TypeError: n is not defined(…)
    console.log(n);
  }
}
go({a:[1,2,3]});
//函数内加入一个代码块就不会报错
function func(arg) {
  {
    let arg; // 不报错
  }
}

七、总结

let语句块为变量提供了局部作用域。它的作用是在单一代码块的词法范围内绑定零个或多个变量; 此外与普通语句块没有任何区别。需要特别注意的是, 在let语句块内使用 var 声明的变量,它的作用域与在let语句块之外声明没有区别;这样的变量仍然具有函数作用域。在使用let语句块时,必须使用花括号,否则会导致语法错误。

八、参考链接

http://es6.ruanyifeng.com/#docs/let

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let

https://stackoverflow.com/questions/37916940/js-why-let-have-this-name

© 著作权归作者所有

共有 人打赏支持
AAASSSSddd
粉丝 19
博文 51
码字总数 48587
作品 0
杭州
程序员
私信 提问
一文读懂 JavaScript 和 ECMAScript 的区别

我曾试着在谷歌上检索 “ JavaScript 和 ECMAScript 之间的区别。” 最后我在得到的海量的混淆不清又相互矛盾的结果中彻底绝望了: “ECMAScript 是标准。” “JavaScript 是标准。” “ECM...

oschina
2017/11/06
1K
9
一文读懂JavaScript和ECMAScript的区别

一文读懂JavaScript和ECMAScript的区别 这篇文章代表了我目前对 JavaScript 和 ECMAScript 之间差异的理解。文章适合那些熟悉 JavaScript 但又想更加清楚地了解其与 ECMAScript、web 浏览器、...

城市之雾
2018/12/05
0
0
ES6中let 和 const 的新特性

在javascript中,我们都知道使用var来声明变量。javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量。 ECMAScript 6 是 JavaScript 语言教程,全面介绍 EC...

peakedness丶
2018/11/18
0
0
ES6走走看看—由块级作用域引出的一场变革

持续更新的github笔记,链接地址:Front-End-Basics 此篇文章的笔记地址:由块级作用域引出的一场变革 ES6走走看看系列,特别鸣谢奇舞读书会~ 块级作用域又称词法作用域,存在于: 函数内部(...

cfangxu
2018/09/07
0
0
ECMAScript 6教程 (一)

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出 原文连接,博客地址为 http://www.cnblogs.com/jasonnode/ 。该系列课程是汇智网 整理编...

笔阁
2015/07/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Temp-Memo

SQL High CPU troubleshooting checklist SELECT TOP 50[Avg. MultiCore/CPU time(sec)] = qs.total_worker_time / 1000000 / qs.execution_count,[Total MultiCore/CPU time(sec)] = ......

Goopand
9分钟前
1
0
dotConnect for Oracle入门指南(七):存储过程

【下载dotConnect for Oracle最新版本】 dotConnect for Oracle(原名OraDirect.NET)建立在ADO.NET技术上,为基于Oracle数据库的应用程序提供完整的解决方案。它为设计应用程序结构带来了新的...

电池盒
11分钟前
1
0
如何使用阿里云ARMS轻松重现用户浏览器问题

客户投诉不断,本地却无法重现? 页面加载较慢是用户经常会反馈的问题,也是前端非常关注的问题之一。但定位、排查解决这类问题就通常会花费非常多的时间,主要原因如下: 页面是在用户端的浏...

阿里云官方博客
15分钟前
1
0
因资源用尽导致服务宕机

1. 事故的发生 服务调用场景和发生的事件如下图所示,红色表示服务不可用. 服务A和服务B都是内部服务,服务C_*为不同运营商提供的服务,遵循一样的协议。 某一天,突然发现所有服务A调用服务...

北风刮的不认真了
19分钟前
2
0
锤子科技"临死前"被"接盘" ,内部人士爆料已改签今日头条母公司

就在昨天,据据锤子科技内部人士透露,部分锤子科技员工在昨天已经接到了相关的临时通知,要求改签劳动合同至今日头条的母公司——字节跳动。至于这是锤子科技真正再度复活还是借尸还魂都不重...

终端研发部
29分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部