前端js(JavaScript)：ES6的let，const和var的区别——图文+代码示例

首先来看看ES6新增的两个关键字：let，const 主要特性：

1. let 声明的变量只在所在的代码块内有效（也就是let实现的是块级作用域）。
2. const用于声明常量，一旦声明不能再次赋值修改。

ES6的let和const相同点和不同点比较图

代码示例

先来看看我们熟悉的ES5中var的一波操作先，来比较一下才能更好的学习：

1.var不同块级作用域下依然可以输出值

{
	var test_var = "微信公众号：一颗剽悍的种子";
	console.log(test_var);
}
	console.log(test_var);

2.var在同一个作用域下重复声明，最后一个重复声明的赋值将覆盖前面的声明的赋值。

{
	var test_var = "微信公众号：一颗剽悍的种子";	
	var test_var = "我把上面覆盖了";
	console.log(test_var);
}
	console.log(test_var);

3.var变量提升没问题（可以看出来这样很不严谨）

{	
	test_let = "看我看我,变量提升";
	var test_let;
	console.log(test_let);
}

再看let和const的共同点：
1. 只在当前代码块有效，否则会报错RefereceError

let

{
	let test_let = "微信公众号：一颗剽悍的种子";
	console.log(test_let);
}
	console.log(test_let);

const

{
	const test_const = "微信公众号：一颗剽悍的种子";
	console.log(test_const);
}
	console.log(test_const);

（下图：报的是同一个错误，但标识符会不同这里划掉，以免干扰）

2.相同作用域不能重复声明（所以不会出现上面var后面赋值的覆盖前面值的情况）
let

	{	
		let test_let = "微信公众号：一颗剽悍的种子";
		let test_let = "let不像var能覆盖前面的";
		console.log(test_let);
	}

const

{	
	const test_const = "微信公众号：一颗剽悍的种子";
	const test_const = "const不像const能覆盖前面的";
	console.log(test_const);
}

都会报同一个SyntaxError语法错误，意思是声明已声明标识符。
（下图：报的是同一个错误，但标识符会不同这里划掉，以免干扰）

3.变量不能提升会报ReferenceError
let

{		
	test_let = "微信公众号：一颗剽悍的种子";
	let test_let
	console.log(test_let);
}

const

{		
	test_const = "微信公众号：一颗剽悍的种子";
	const test_const;
	console.log(test_const);
}

let和const不同点：
先看let
1.使用let声明变量可以不用初始化

{
	let test_let;
	test_let = "微信公众号：一颗剽悍的种子";
	console.log(test_let);
}

2.let赋值后值可以再赋值修改

{
	let test_let = "微信公众号：一颗剽悍的种子";
	test_let = "重新赋值啦";
	console.log(test_let);
}

const
1.使用const声明必须初始化，否则会报错SyntaxError

{
	const test_const;
	test_const = "必须先初始化";
	console.log(test_const);
}

2.const 定义常量赋值后不能再赋值修改，否则会报错SyntaxError

{		
	const test_const = "微信公众号：一颗剽悍的种子";
	test_const = "再赋值修改";
	console.log(test_const);
}

总结

从上面的var到let和const的比较可以看到，var可以的特性let和const基本都不可以，也就是说使用let和const比var有了更多的限制，但同时可以看到这些特性让代码更加规范和严谨。