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 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
如何用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
Phpbean路由转发的php代码
2008/01/10 PHP
php 操作excel文件的方法小结
2009/12/31 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
thinkPHP查询方式小结
2016/01/09 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
PYTHON基础-时间日期处理小结
2018/05/05 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
python numpy数组中的复制知识解析
2020/02/03 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
高中生的自我鉴定范文
2014/01/24 职场文书
安全生产投入制度
2014/01/29 职场文书
主管竞聘书范文
2014/03/31 职场文书
班级活动总结格式
2014/08/30 职场文书
写景作文评语集锦
2014/12/25 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
2015年超市工作总结
2015/04/09 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js