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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 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求正负数数组中连续元素最大值示例
2014/04/11 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
详解Django框架中的视图级缓存
2015/07/23 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
会计辞职信范文
2014/01/15 职场文书
二年级学生评语大全
2014/04/23 职场文书
校本课程教学计划
2015/01/19 职场文书
杜甫草堂导游词
2015/02/03 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书