ES6新特性(一看就懂)-let，constlet和const命令

72 阅读 0 评论 48 点赞

我是靠谱客的博主震动苗条，这篇文章主要介绍ES6新特性(一看就懂)-let，constlet和const命令，现在分享给大家，希望可以做个参考。

let和const命令

let命令

不允许重复声明

复制代码

1
2
3
4
5
6
7
8
let a = '123';
let a = '456';
console.log(a); // Uncaught ReferenceError: a is not defined
var b = '123';
var b = '456';
console.log(b); // 456
// 书写规范：静态字符串一般使用单引号

不存在变量提升

复制代码

1
2
3
4
5
6
7
8
9
10
11
console.log(a);
let a = '123';
// Uncaught ReferenceError: a is not defined
console.log(b);
var b = '456';
// undefined
// 上面var部分代码等同于
var b;
console.log(b);
b = '456';

拓展：变量提升，函数提升以及其优先级关系？

存在块级作用域

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 情况一
{
	let a = '123';
	console.log(a); // 123
}
{
	var b = '456';
	console.log(b); // 456
}
// 情况二
{
	let a = '123';
}
console.log(a); // Uncaught ReferenceError: a is not defined
{
	var b = '456';
}
console.log(b); // 456

思考：为什么需要块级作用域？
我们知道ES5中有全局作用域和函数作用域，没有块级作用域，可能出现以下问题:
- (1)内层变量可能覆盖外层变量
复制代码var a = '123'; function f() { console.log(a); if (false) { var a = '456'; } } f(); // 打印 undefined
```
1
2
3
4
5
6
7
8
9
10
var a = '123';
function f() {
	console.log(a);
	if (false) {
		var a = '456';
	}
}
f();
// 打印 undefined
```
分析：因为var 声明的变量不存在块级作用域，因此上述代码等同于
复制代码var a = '123'; function f() { var a; console.log(a); if (false) { a = '456'; } } f();
```
1
2
3
4
5
6
7
8
9
10
var a = '123';
function f() {
	var a;
	console.log(a);
	if (false) {
 		a = '456';
	}
}
f();
```
这里只考虑函数内的变量提升，函数体里声明的变量不会被提升到函数外，同时对于整个代码的变量和函数提升，不做考虑，详情见：变量提升，函数提升以及其优先级关系？
复制代码var a = '123'; function f() { console.log(a); if (false) { a = '456'; } } f(); // 打印 123
```
1
2
3
4
5
6
7
8
9
10
var a = '123';
function f() {
	console.log(a);
	if (false) {
 		a = '456';
	}
}
f();
// 打印 123
```
- (2)用来计数的循环变量泄露为全局变量
复制代码var arr = [1, 2, 3]; for(var i = 0; i < arr.length; i++) { console.log(arr[i]) } console.log(i); // 打印 3
```
1
2
3
4
5
6
var arr = [1, 2, 3];
for(var i = 0; i < arr.length; i++) {
	console.log(arr[i])
}
console.log(i); // 打印 3
```
上述代码i在循环结束后，并未消失，在全局环境中依然可以访问到。
案例分析
复制代码var a = []; for (var i = 0; i < 3; i++) { a[i] = function () { console.log(i); }; } a[0](); // 打印 3
```
1
2
3
4
5
6
7
8
9
var a = []; 
for (var i = 0; i < 3; i++) { 
	a[i] = function () { 
		console.log(i);
	 };
}
a[0](); 
// 打印 3
```
使用let后
复制代码var a = []; for (let i = 0; i < 3; i++) { a[i] = function () { console.log(i); }; } a[0](); // 打印 0
```
1
2
3
4
5
6
7
8
9
var a = []; 
for (let i = 0; i < 3; i++) { 
	a[i] = function () { 
		console.log(i);
	 };
}
a[0](); 
// 打印 0
```
原因：在进行for循环遍历，
使用var 定义变量，方法里面的i相当于全局变量的i，每次遍历，都会改变函数内部i的值，这就意味着当遍历结束，调用a方法,输出的就是跳出循环后i的值。
使用let定义变量，它存在块级作用域，每个a[i]方法都是相互独立，不受影响的，自然i是什么打印什么。

const命令

声明只读常量，一旦声明，常量的值不能改变。变量名通常用大写字母表示,声明常量一定要赋初始值。

复制代码

1
2
3
4
5
6
const MAX = 99999;
MAX = 100000;
// Uncaught TypeError: Assignment to constant variable.
const MIN;
// Uncaught SyntaxError: Missing initializer in const declaration

存在块级作用域。
用cost 声明数组和对象，可以修改其属性，但不允许重新赋值。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
const obj = {
	name: 'Tom',
	age: 18
}
obj.job = 'student';
obj.age = 28;
console.log(obj);// {name: 'Tom', age: 28, job: 'student'}
arr = [1, 2, 3, 4];// Uncaught TypeError: Assignment to constant variable.
obj = {name: 'Tom', age: 28}; // Uncaught TypeError: Assignment to constant variable.
arr = [1, 2, 3];// Uncaught TypeError: Assignment to constant variable.