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 相关文章推荐
超级退弹代码
Jul 07 Javascript
javascript 获取网页参数系统
Jul 19 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 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
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
python处理二进制数据的方法
2015/06/03 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
幼儿园保育员辞职信
2014/01/12 职场文书
自我反省检讨书
2014/01/23 职场文书
员工趣味活动方案
2014/08/27 职场文书
商场父亲节活动方案
2014/08/27 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
cypress测试本地web应用
2022/06/01 Javascript