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 相关文章推荐
javascript高级学习笔记整理
Aug 14 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
vue自动化表单实例分析
May 06 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
Node.js fs模块原理及常见用途
Oct 22 Javascript
Python机器学习之决策树和随机森林
Jul 15 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
爸爸的花儿落了教学反思
2014/02/20 职场文书
承诺书的格式范文
2014/03/28 职场文书
党员志愿者活动方案
2014/08/28 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
Redis唯一ID生成器的实现
2022/07/07 Redis