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访问XML数据的实例
Dec 27 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
js 对象使用的小技巧实例分析
Nov 08 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
php除数取整示例
2014/04/24 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
CSS常用网站布局实例
2008/04/03 Javascript
初学Javascript的一些总结
2008/11/03 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
Python随机数函数代码实例解析
2020/02/09 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
python主要用于哪些方向
2020/07/05 Python
质检员的岗位职责
2013/11/15 职场文书
法制宣传标语
2014/06/23 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
学习心理学心得体会
2016/01/22 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
Golang bufio详细讲解
2022/04/21 Golang