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 秒表实现代码
Jul 24 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
js常用正则表达式集锦
May 17 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 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 _autoload自动加载类与机制分析
2012/02/10 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
python将文本转换成图片输出的方法
2015/04/28 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
python如何实现反向迭代
2018/03/20 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
年度考核自我评价
2014/01/25 职场文书
化学教学随笔感言
2014/02/19 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
爱心捐助倡议书
2014/05/19 职场文书
主题团日活动总结
2014/06/25 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
React forwardRef的使用方法及注意点
2021/06/13 Javascript