2. let和const命令--ES6
1. let命令
let 命令不存在变量提升
let 命令 只在let命令所在的代码块内有效。
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b //
特别适合 for 语句
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); //
其实对于上面的代码, babel 转码以后变成
"use strict";
var a = [];
var _loop = function _loop(i) {
a[i] = function () {
console.log(i);
};
};
for (var i = 0; i < 10; i++) {
_loop(i);
}
a[6](); //
for循环还有一个特别之处,就是循环语句部分是一个父作用域,而循环体内部是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc
暂时性死区, temporal dead zone,简称 TDZ
下面的例子, 由于在代码里 定义了let tmp, 所以会报错
var tmp = 123;
if (true) {
tmp = 'abc'; // tmp is not defined
typeof tmp; // tmp is not defined
let tmp;
}
但是如果直接 typeof 一个不存在的变量 aaa, 则不会报错
typeof aaa // "undefined"
不允许重复声明
let不允许在相同作用域内,重复声明同一个变量。
function f() {
let a = 10;
var a = 1;
}
f(); // 执行的时候报错
function func(arg) {
let arg;
}
func(2); // 执行的时候报错
function func(arg) {
{
let arg; // 不报错
}
}
func(2); // 不报错
2. 块级作用域
内层作用域可以定义外层作用域的同名变量。
{
let insane = 'Hello World';
{let insane = 'Hello World'}
};
块级作用域的出现,实际上使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了。
// IIFE 写法
(function () {
var tmp = 2;
console.log(tmp);
}()); // 块级作用域写法
{
let tmp = 2;
console.log(tmp);
}
块级作用域与函数声明
ES5 规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。
但是,浏览器 为了兼容以前的旧代码,还是支持在块级作用域之中声明函数。
ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。
// 情况一
if (true) {
function f() {}
} // 情况二
try {
function f() {}
} catch(e) {
// ...
}
ES6规定
允许在块级作用域内声明函数。
函数声明类似于var,即会提升到全局作用域或函数作用域的头部。
同时,函数声明还会提升到所在的块级作用域的头部。
所以下面的代码会报错
// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); } (function () {
if (false) {
// 重复声明一次函数f
function f() { console.log('I am inside!'); }
} f(); // Uncaught TypeError: f is not a function
}()); // 相当于: // 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
var f = undefined;
if (false) {
function f() { console.log('I am inside!'); }
} f();
}());
// Uncaught TypeError: f is not a function
但是在 ES5 环境里, 是可以正常运行, 打印 I am inside!
所以在块级作用域里用, 建议用函数表达式来声明 let f = function(){}
3. const 命令
const声明一个只读的常量。一旦声明,常量的值就不能改变。
const a = 1;
a = 2; // Uncaught TypeError: Assignment to constant variable.
const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,
const a; // Missing initializer in const declaration
const的作用域:
只在声明所在的块级作用域内有效。
声明的常量也是不提升。
不可重复声明。
本质
const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。
对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针,const只能保证这个指针是固定的
const foo = {};
foo.prop = 123; // 成功
foo = {}; // Uncaught TypeError: Assignment to constant variable.
ES6 声明变量的六种方法
var, function, let, const, import, class
4.顶层对象的属性
在浏览器环境指的是window对象
node 环境里没有 window 对象, 有global对象;
ES6 规定var和function命令声明的全局变量,依旧是顶层对象的属性;
let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性
// node 环境里
var a = 1;
console.log( global.a ); // 输出1
// ES6 环境里
var a = 1;
window.a // 1
let b = 1;
window.b // undefined
5. global 对象
浏览器 顶层对象 window 和 self; (window === self // true)
Web Worker self指向顶层对象
node global
全局环境中,this会返回顶层对象。但是,Node模块和ES6模块中,this返回的是当前模块。
2. let和const命令--ES6的更多相关文章
- es6学习笔记(1) let和const命令详解
let和const命令: Es6新增了let命令,声明变量,但与var不一样的,只在let命令所在的代码块内有效(如for循环之外let声明的变量就不再有效).并且let不像var那样会发生" ...
- ES6之let(理解闭包)和const命令
ES6之let(理解闭包)和const命令 最近做项目的过程中,使用到了ES6,因为之前很少接触,所以使用起来还不够熟悉.因此购买了阮一峰老师的ES6标准入门,在此感谢阮一峰老师的著作. 我们知道,E ...
- ES6 入门系列 - let 和 const 命令
let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = ; ; } a // ReferenceEr ...
- ES6 之 let和const命令 Symbol Promise对象
ECMAScript 6入门 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了. (2016年6月,发布了小幅修订的<ECMASc ...
- ES6 let和const命令(3)
const 用来声明常量.一旦声明,就不能改变. const在声明必须初始化,只声明不赋值会出错 const的作用域与let一样,只在声明的块级作用域有效. const命令声明的常量也不提升,同样存在 ...
- es6 let和const命令(1)
基本用法 ES新增了let命令,用于声明变量.其用法类似于var,但是所声明的变量只在let命令所在的代码块中有效. for(let i = 0;i<5;i++) {} console.log( ...
- es6之let和const命令的一些笔记
let和const命令 let命令 基本用法 let命令用来声明变量,声明的变量只在命令所在的代码块内有效.for循环中很适合使用let命令. 有必要理解的例子: var a = []; for (v ...
- ES6知识整理(1)--let和const命令
最近准备在业余空闲时间里一边学习ES6,一边整理相关知识.只有整理过的学习才是有效的学习.也就是学习之后要使用和整理成文,才是正在的学到了... 那么现在开始 LINK START!(首先是第一讲,前 ...
- ES6简介之let和const命令解说
一.var申明变量 学习过JavaScript的同学都应该知道,ES5中申明变量使用var,ES5中的var可以说是无所不能的,所有类型的变量都是由var来申明,但往往很多使用者不知道var申明的变量 ...
随机推荐
- Chrome浏览器启动页被360导航篡改解决方法
右键Chrome浏览器快捷方式,选择“属性”,在“目标”的结尾处有添加的网址,删了即可. 2 如果在结尾处没有任何网址,可以添加“ -nohome”,这样下次启动时,就会打开一个空白页,也就不会打开被 ...
- 【BZOJ】1584: [Usaco2009 Mar]Cleaning Up 打扫卫生
[算法]DP+数学优化 [题意]把n个1~m的数字分成k段,每段的价值为段内不同数字个数的平方,求最小总价值.n,m,ai<=40000 [题解] 参考自:WerKeyTom_FTD 令f[i] ...
- springcloud(一):大话Spring Cloud(山东数漫江湖)
研究了一段时间spring boot了准备向spirng cloud进发,公司架构和项目也全面拥抱了Spring Cloud.在使用了一段时间后发现Spring Cloud从技术架构上降低了对大型系统 ...
- Everything Has Changed(HDU6354+圆交+求周长)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6354 题目: 题意:用一堆圆来切割一个圆心为原点,半径为R的圆A,问切割完毕后圆A外围剩余部分的周长( ...
- TensorFlow 模型保存和导入、加载
在TensorFlow中,保存模型与加载模型所用到的是tf.train.Saver()这个类.我们一般的想法就是,保存模型之后,在另外的文件中重新将模型导入,我可以利用模型中的operation和va ...
- elementui table 多选 获取id
//多选相关方法 toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggl ...
- 父元素与子元素之间的margin-top问题(css hack)
hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. hytml代码: &l ...
- Java多线程学习(一)Java多线程入门
转载请备注地址:https://blog.csdn.net/qq_34337272/article/details/79640870 系列文章传送门: Java多线程学习(一)Java多线程入门 Ja ...
- mysql中的单引号/小数点/字符转换为数字/警告信息
我们准备玩点有趣的: select 一个数字: mysql from mysql.user; +---+ | +---+ | | | +---+ rows in set (0.00 sec) mysq ...
- centos 安装flash
linux系统中安装flash插件 linux中安装flashplayer插件的简单方法: 1.下载其中最新版本的播放器,下载地址: http://get.adobe.com/cn/flashplay ...