用实例说明 var、let、const 的区别和特性

用实例说明 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"]; // 报错