用实例说明 var、let、const 的区别和特性
写了这么就居然发现没写一篇关于 let 和 const 的…从今天开始全方位的进军 es6,哈哈啊哈哈哈
首先回顾一下 es5 var 的特性和作用域。var 命令可以声明一个变量,声明的变量和函数会有变量提升。例如:
console.log(a); // undefined
var a = 10;
console.log(foo); // undefined
var foo = function() {
return 12;
};
详情可跳至 var 作用域||变量
在 es5 中 JavaScript 没有块级作用域特性,使用 var 声明的变量会产生污染。例如:
var i = "ooo";
for (var i = 0; i < 10; i++) {
console.log(i); //0,1,2,3,4,5,6,7,8,9
}
console.log(i); // 10
变量 i 由于是 var 声明的,在全局范围内都有效,每一次循环 i 的值都会改变,由于不是块级作用域,循环内的 i 会在循环结束后(for 循环外)也会有效。
let 和 var 的区别:
1.不存在变量提升
使用 let 声明变量,使用它必须要在声明之后,否则报错。例如:
console.log(b); // b is not defined
let b = 10;
2.在同一作用域内不能重复声明
使用 var 声明变量可以重复声明同样名称的变量,后声明的会覆盖之前声明的,例如:
var a = 10;
var a = 9;
if (true) {
var a = 5;
}
console.log(a); // 5
使用 let 则不允许重复声明:
let a = 10;
let a = 9; //Identifier 'a' has already been declared
3.暂时性死区
使用 var 声明变量时的情况:
var a = 10;
if (true) {
a = 6;
var a;
}
console.log(a); // 6
使用 let:
let a = 10;
if (true) {
a = 6; // a is not defined
let a;
}
console.log(a);
这是因为使用 let 相当于给 JavaScript 增加了块级作用域,它所声明的变量会绑定这个区域不受外界影响。
上面的例子中,let 写在 if 语句内,此时 if 语句{}形成一个块级作用域,这个作用域不受外界影响{a = 6;let a;}
,a=6 赋值语句执行的时候 a 还没有被声明,所以报错。也就是说在使用 let 声明变量之前(已经写了 let 声明)不可以使用该变量,就称为暂时性死区。
4.块级作用域
使用 var 声明变量,不会对作用域有所改变。使用 let 声明变量会自动给当前声明的作用域绑定块级作用域。
例如:
if (true) {
let a = 10;
}
这个 if 里的{}就形成了块级作用域,而普通{}或者{var a = 10},则不会对该作用域有影响。换句话说,使用 var 则在该{}外能够访问该变量,使用 let 则在{}外不能访问该变量。例如:
if (true) {
let a = 10;
}
console.log(a); // a is not defined
if (true) {
var b = 10;
}
console.log(b); //10
5.const
关于 let 以上特性,const 也同样具备。不过 const 表示声明一个只读常量,也就是说是一个不可以被更改的数据。例如:
const a = 10;
a = 6; //Assignment to constant variable.
a 变量不可以更改,这一点与 let 不同,因为 let 声明的变量是可以被更改的。其次,const 一旦声明就要立刻初始化给它赋值,只声明不赋值会报错。而 let 可以先声明后赋值。
const a //Missing initializer in const declaration
这里需要注意的是const保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。对于符合类型数据(如对象、数组)变量指向的内存地址保存的只是一个指针,const只保证这个指针是固定的,不能控制指针指向的数据结构是否改变。
const foo = {};
// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop; // 123
// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only
const a = [];
a.push("Hello"); // 可执行
a.length = 0; // 可执行
a = ["Dave"]; // 报错