JavaScript中用let语句声明作用域的用法讲解


Posted in Javascript onMay 20, 2016

语法

let variable1 = value1

参数
variable1
要声明的变量的名称。
value1
赋给变量的初始值。

备注
使用 let 语句声明一个变量,该变量的范围限于声明它的块中。  可以在声明变量时为变量赋值,也可以稍后在脚本中给变量赋值。 
使用 let 声明的变量,在声明前无法使用,否则将会导致错误。
如果未在 let 语句中初始化您的变量,则将自动为其分配 JavaScript 值 undefined。

示例:

var l = 10;
{
  let l = 2;
  // At this point, l = 2.
}
// At this point, l = 10.

// Additional ways to declare a variable using let.
let index;
let name = "Thomas Jefferson";
let answer = 42, counter, numpages = 10;
let myarray = new Array();

块级作用域

for(var i = 0; i < 10; i++){}
console.log(i); //10

for(let j = 0; j < 10; j++){}
console.log(j); //"ReferenceError: j is not defined

不存在变量提升

console.log(a); // 输出undefined
console.log(b); // 报错ReferenceError
console.log(c); // 报错ReferenceError
var a = 2;
let b = 2;

注意区别undefined和ReferenceError

暂时性死区(TDZ)
只要进入当前块级作用域,所使用的变量已经存在了,但在声明之前都属于死区,不可进行操作。
注意: typeof不再是100%安全的操作

typeof x; // ReferenceError
typeof y // undefined
let x;

不允许重复声明

let x = 1;
let x; // "SyntaxError: Identifier 'x' has already been declared

var y = 2;
var y = 3; // y = 3

块级作用域

// 匿名函数写法
(function () {
 var tmp = ...;
 ...
}());

// 块级作用域写法
{
 let tmp = ...;
 ...
}

ES5的严格模式规定,函数只能在顶层作用域和函数内声明,其他情况(比如if代码块、循环代码块)的声明都会报错。

// ES5
'use strict';
if (true) {
 function f() {} // 报错
}

ES6由于引入了块级作用域,这种情况可以理解成函数在块级作用域内声明,因此不报错,但是构成区块的大括号不能少

// 报错
'use strict';
if (true)
 function f() {}

声明的全局变量不再是window的属性

"use strict";
var a = 1;
console.log(window.a) // 1

let b = 1;
console.log(window.b) // undefined
Javascript 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 #Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 #Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 #Javascript
详解JavaScript中的事件流和事件处理程序
May 20 #Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 #Javascript
JavaScript中的Object对象学习教程
May 20 #Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 #Javascript
You might like
PHP用户指南-cookies部分
2006/10/09 PHP
PHP文件下载类
2006/12/06 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
JTrackBar水平拖动效果
2007/07/15 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python科学画图代码分享
2017/11/29 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
《阳光》教学反思
2014/02/23 职场文书
化工实习心得体会
2014/09/09 职场文书
2014年团支书工作总结
2014/11/14 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书