es6(let与const命令)
理论区别
var | let | const |
---|---|---|
在函数作用域内或者全局有效,没有块级作用域 | 只在let 命令所在的代码块内有效 | 只在声明所在的块级作用域内有效 |
能重复声明 | 不能重复声明 | 不能重复声明 |
存在变量提升 | 暂时性死区 | 暂时性死区 |
举例
var与let、const的区别(一)
基本用法
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6]();
结果输入: 10
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6]();
结果输入: 6
解释说明:
粗暴记忆——一个“{}”相当于一个代码块
(1)用var命令声明 === 全局范围内声明 ∧ var可以重复声明(下一次声明替换上一次)
∴ i 可以经过多次循环,输出结果 10
(2)用let命令声明,当前的 i 只在本轮循环有效
(3)用const命令声明只读的常量,常量不能改变
const一旦声明变量,就必须立即初始化,不能留到以后赋值。
var与let的区别(二)
变量提升
console.log(foo);
var foo = 2;
结果输入: undefined
console.log(bar);
let bar = 2;
结果输入: ReferenceError
解释说明:
(1)用var命令声明,发生了变量提升
脚本开始运行时
∵ 变量已存在,但是没有值
∴ 会输出undefined
(2)用let命令声明,不发生变量提升
脚本开始运行时
∵ 变量不存在
∴ 会输出undefined
var与let的区别(三)
暂时性死区
- 块级作用域内存在let命令,它所声明的变量就“绑定”这个区域,不再受外部的影响。
if (true) {
tmp = 'abc';
console.log(tmp);
let tmp;
console.log(tmp);
tmp = 123;
console.log(tmp);
结果输入: ReferenceError
ReferenceError
undefined
123
}
解释说明:
(1)在代码块中存在let
- 在let命令声明变量之前,都属于变量的“死区”。
- 即使使用typeof运行,亦报错ReferenceError
(2)在代码块中不存在let
- 使用typeof运行,结果输出underfined
var与let的区别(四)
不允许重复声明
let不允许在相同作用域内,重复声明同一个变量。
function func(arg) {
let arg; // 报错
}
function func(arg) {
{
let arg; // 不报错
}
}
解释说明:
(1)在同一个作用域内
(2)在不同作用域内
块级作用域
作用域 | es5 | es6 |
---|---|---|
全局作用域 | √ | √ |
函数作用域 | √ | √ |
块级作用域 | × | √ |
函数 | 顶层作用域和函数作用域之中声明 | 允许在块级作用域之中声明函数,在块级作用域之外不可引用 |
没有块级作用域的危害
- 内层变量可能会覆盖外层变量
- 用来计数的循环变量泄露为全局变量
ES6 声明变量的六种方法
- var
- function
- let
- const
- import
- class