【ES6】—let 声明方式
一、不属于顶层对象window
- let 关键字声明的变量，不会挂载到window的属性
var a = 5
console.log(a)
console.log(window.a)
// 5
// 5
// 变量a 被挂载到window属性上了 ， a = window.alet b = 6
console.log(b)
console.log(window.b)
// 6
// undefined
小节：
var 声明的变量，会挂载到window的属性，容易造成全局变量污染
二、不允许重复声明
- let 关键字 不可以声明相同的变量，在运行阶段直接报错
var a = 5
var a = 6
console.log(a)
// 6 let b = 7
let b = 8
console.log(b)
// Uncaught SyntaxError: Identifier 'b' has already been declared
// b已经声明过了，不允许重复声明
小节：
var 可以声明相同变量，后声明的变量的值会覆盖前面声明的变量的值
三、不存在变量提升
- let 关键字不会把变量声明，放到代码的最前面，只会再执行时声明
console.log(a)
var a = 6
// 等同于
var a
console.log(a)
a = 6
// undefinedconsole.log(b)
// 报错, 没有声明
let b = 7
小节：
使用 var 关键字声明的变量，无论代码在何处，都会把变量声明放到代码的最前面
四、暂时性死区
- 暂时性死区：先使用变量，再使用let关键字声明变量，就会出现暂时性死区，因为没有先声明就赋值了
var a = 5
if (true) {a = 6let a
}
// Uncaught ReferenceError: Cannot access 'a' before initialization
小节：
a 首先是全局变量，然后 给a 赋值，再使用let 关键字 声明变量 a, 这时候a 变成了局部变量，局部变量 a 先被使用了，再声明就会出现暂时性死区
- 隐蔽的暂时性死区
// 给参数设置默认值
function foo (a = b, b =2) {console.log(a, b)
}
foo()
// Uncaught ReferenceError: Cannot access 'b' before initialization
// b 再声明之前，你不能使用它
// a = b, b =2 因为代码从左往右执行， a = b， 表示把b的值赋给a， 但是b现在还没有声明和赋值，所以就出现了暂时性死区
- 改造后
// 给参数设置默认值
function foo (a = 2, b = a) {console.log(a, b)
}
foo()
// 2 2
// a = 2, b = a ， 先声明了a 并赋值，再把a的值赋给b ，是没有问题的
小节：
局部变量先声明，再赋值，就不会出现暂时性死区
五、块级作用域
- var 声明的变量只有全局作用域和函数作用域，没有块级作用域， 所以 var 声明变量再任何地方都可以使用
for (var i =0; i< 3; i++) {console.log('循环内:' + i)
}
console.log('循环外', + i)
// 循环内:0
// 循环内:1
// 循环内:2
// 循环外 3
- 块级作用域： 指的是大括号{}里面，使用let关键字 声明的变量，只能在大括号里面使用，大括号外无法使用
把 var 改成 let
for (let i =0; i< 3; i++) {console.log('循环内:' + i)
}
console.log('循环外', + i)
// 循环内:0
// 循环内:1
// 循环内:2
// Uncaught ReferenceError: i is not defined ， i没有声明
- var 没有块级作用域，示例2
if (false) {var a = 5
}
console.log(a)
// undefined
小节：
因为 var 没有块级作用域，加上var 可以变量提升, 所以代码等同于
var a
if (false) {a = 5
}
console.log(a)
// undefined
把 var 改造成let
if (false) {let a = 5
}
console.log(a)
// Uncaught ReferenceError: a is not defined
// a 因为大括号使用let关键声明，所以有块级作用域，大括号外无法使用
- ES6 中使用let 关键字声明的变量 所产生块级作用域，必须要有大括号，不能省略, 否则报错
if(true) let a =5
// Uncaught SyntaxError: Lexical declaration cannot appear in a single-statement context
优化后
if(true){let a =5
}
- 常见面试题
for (var i =0; i < 3 ; i++) {setTimeout(function (){console.log(i)})
}
// 打印3 个 3
因为遇到setTimeout是异步任务，会先放入事件处理器中，等待运行栈的同步任务执行完成之后，再把异步任务放入任务队列中，再从任务队列中一个个放入运行栈中执行
小节：每个定时器执行时，都是再for循环之后取值，所以打印3个3
- 通过闭包实现定时器按顺序打印
for (var i = 0; i < 3 ; i++) {// 立即执行函数, 一次性使用(function(j){ // j 表示形参setTimeout(function (){console.log(j)})})(i) // i 表示实参
}
闭包： 有一个外部函数和内部函数，内部函数会调用外部函数的变量，这样就可以保证外部函数的变量的状态值不被释放，因为内部函数一直再引用着外部函数的值
- 通过let 关键字实现定时器按顺序打印
for (let i = 0; i < 3 ; i++) {setTimeout(function (){console.log(i)})
}
通过 babel在线工具 实现 ES6 语法转 ES5语法
var _loop = function _loop(i) {setTimeout(function (){console.log(i)})
}
for (var i = 0; i < 3; i++) {_loop(i);
}
小节：当使用let关键字声明的变量时，被定时器调用，转换为ES5语法时，自动的转换为闭包的形式，保留i循环的每一个的状态值不被释放