ES6：理解 var let const

var
let
const
声明风格及最佳实践

变量

ECMAScript 变量是松散类型的，意思是变量可以用于保存任何类型的数据。每个变量只不过是一个用于保存任意值的命名占位符。有三个关键字可以声明变量：var、let、const。其中var在ECMAScript的所有版本中都可以使用，而let和const只能在ECMAScript6中使用。

1.var

var message

声明名为message的变量，可以用于保存任何类型的值（不初始化的情况下，变量会保存一个特殊的值undefind）

var message="hi";
message=100;//合法但不推荐

虽然不推荐改变保存变量保存值的类型，但这在ECMAScript中是完全有效的。

var作用域

var操作符定义的变量会成为包含它的函数的局部变量

 function test() {
 var message="hi";
}
console.log(message);//出错

这里message变量是函数内部使用var定义，意味该变量将在函数退出时被销毁,所以打印message会报错

var声明提升

使用var时下面的代码不会报错。因为使用var声明的变量会自动提升到函数作用域顶部：

function foo () {
console.log(age);
var age=20;
}
foo();

//类似于

function foo () {
var age;
console.log(age);
var age=20;
}
foo();//undefined

这就是所谓的"提升"，也就是把所有的变量声明拉到函数作用域的顶部。此外，反复使用多次var也没问题。

function foo() {
var age = 16;
var age = 26;
var age = 36;
}

2.let

let 跟 var作用差不多，但有着非常重要的区别。最明显的区别是
let：声明范围是块

if(true) {
var age= 26;
console.log(age);//26
}
console.log(age);//26

if(true) {
let age= 26;
console.log(age);
}
console.log(age);//ReferenceError: age 没有定义

在这里，age变量之所以不能在if块外部被引用，是因为它的作用域仅限于该块内部。
1）块作用域是函数作用域的子集，因此适用于var的作用域限制同样也适用于let
2）let也不允许同一块作用域中出现冗余声明，会导

致报错

var name;
var name;

let age;
let age;//SyntaxError:标识符age已经声明过

1.暂时性死区

let 与 var的另一个重要的区别就是let声明的变量不会在作用域中被提升

//name会被提升
console.log(name);//undefined
var name ="Matt";

//age不会被提升
console.log(age);//ReferenceError: age 没有定义
let age=26;

在解析代码时，JavaScript引擎也会注意出现在块后面的let声明，只不过在此之前不能以任何方式来引用未声明的变量。在let声明之前的执行瞬间被称为"暂时性死区"，在此阶段引用任何后面才声明的变量都会抛出ReferenceError。

2.全局声明

与var关键字不同，使用let在全局作用域中声明的变量不会成为window对象的属性（var 声明的变量则会）

var name ="xiao";
cosole.log(window.name);//"xiao"

let age= 20;
console.log(window.age);//undefined

不过，let声明仍然是在全局作用域中发生的，相应变量会在页面的生命周期内存续。因此，为了避免SyntaxError,必须确保页面不会重复声明同一个变量。

3.条件说明

在使用var声明变量时，由于声明会被提升，JavaScript引擎会自动将多余的声明在作用域顶部合并为一个声明。因为let的作用域是块，所以不可能检查前面是否已经使用let声明过同名变量，同时也就不可能在没有声明的情况下声明它。

<script>
var name= "Continue"
let age=20
</script>

<script>
//假设脚本不确定页面中是否已经声明了同名名量
//那它可以假设还没有声明过

var name ="Continue"
//这里没问题，因为可以被作为一个提升声明来处理
//不需要检查之前是否声明过同名变量

let age=20;
//如果age之前声明过，这里会报错
</script>

4.for循环中的let声明

在let出现之前，for循环定义的迭代变量会渗透到循环体外部：

for(var i=0;i<5;++i){
}
console.log(i);//5

改成使用let之后，这个问题就消失了，因为迭代变量的作用域仅限于for循环块内部:

for(let i=0;i<5;++i){
}
console.log(i);//ReferrenceError:i 没有定义

在使用var的时候，最常见的问题就是对迭代变量的奇特声明和修改：

for(var i = 0; i< 5; ++i){
  setTimeout(()=>console.log(i), 0)
}
//实际上输出5、5、5、5、5

之所以会这样，是因为在退出循环时，迭代变量保存的是导致循环退出的值：5。在之后执行超时逻辑时，所有i都是同一个变量，因而输出的都是同一个最终值。
而在使用let声明迭代变量时，JavaScript引擎在后台会为每个迭代循环声明一个新的迭代变量。每个setTimeout引用的都是不同的变量实例。

for(let i = 0; i< 5; ++i){
  setTimeout(()=>console.log(i), 0)
}
//实际上输出0、1、2、3、4

3.const

const的行为与let基本相同，唯一一个重要的区别是用它声明变量时必须同时初始化变量，且尝试修改const声明的变量会导致运行错误

const age=20;
age=22;//TypeError:给常量赋值

//const也不允许重复声明
const name="Continue";
const name="xiao"//SyntaxError

//const声明的作用域也是块
const name="Continue"
if(true){
const name="xiao"
}
console.log(name);//Continue

const声明的限制只适用于它指向的变量的引用。换句话说，如果const变量引用的是一个对象，那么修改这个对象的内部属性并不违反const的限制。

const person(){};
person.name="Continue";

即使JavaScript引擎会为for循环中的let声明分别创建独立的变量实例，而且const变量跟let变量很相似，也不能用const来声明迭代变量（因为迭代变量会自增）：

for(const i = 0; i< 5; ++i){
}//TypeError:给常量赋值

4.声明风格及最佳实践

1.不使用var

有了let和const，大多数开发者会发现不需要var了。限制自己只使用let和const有助于提升代码质量，因为变量有了明确的作用域、声明位置、以及不变的值。

2. const优先，let次之

使用const声明可以让浏览器运行时强制保持质量不变，也可以让静态代码分析工具提前发现不合法的赋值操作。因此，很多开发者认为应该优先使用const来声明变量，只在提前知道未来会有修改时，在使用let。这样可以让开发者更有信心的判断某些变量的值永远不会变，同时也能迅速的发现因意外赋值导致的非预期行为。