ES6系列之声明变量let与const

简介

概念

ES6 的第一个版本，在 2015 年 6 月发布了，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版之后的 JavaScript 的下一代标准，涵盖了 ES201五、ES201六、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。
各大浏览器对ES6的支持：kangax

Babel

Babel 是一个普遍使用的 ES6 转码器，能够将 ES6 代码转为 ES5 代码，从而在现有环境执行。
Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。

声明变量

ES5 只有两种声明变量的方法：var命令和function命令，ES6 除了添加let、const、import和class命令。因此，ES6 一共有 6 种声明变量的方法。

ES5 之中，顶层对象的属性与全局变量是等价的。ES6 为了改变这一点，一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另外一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

let

ES6 新增了let命令，用来声明变量。它的用法相似于var，可是所声明的变量，只在let命令所在的代码块内有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

不容许重复声明

let不容许在相同做用域内，重复声明同一个变量。

// 报错
function func() {
  let a = 10;
  var a = 1;
}

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

块级做用域

• ES6 容许块级做用域的任意嵌套。
• 内层做用域能够定义外层做用域的同名变量。
• 外层做用域没法读取内层做用域的变量。

{{{{
  {let insane = 'Hello World'
   {let insane = 'Hello World'}
  }
  console.log(insane); // 报错
}}}};

块级做用域与函数声明

• ES5 规定，函数只能在顶层做用域和函数做用域之中声明，不能在块级做用域声明。
• ES6 规定，块级做用域之中，函数声明语句的行为相似于let，在块级做用域以外不可引用。

考虑到环境致使的行为差别太大，应该避免在块级做用域内声明函数。若是确实须要，也应该写成函数表达式，而不是函数声明语句。

不存在变量提高

let命令所声明的变量必定要在声明后使用，不然报错。

// var 的状况
console.log(foo); // 输出undefined
var foo = 2;

// let 的状况
console.log(bar); // 报错ReferenceError
let bar = 2;

暂时性死区

只要块级做用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，再也不受外部的影响。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

在代码块内，使用let命令声明变量以前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

const

const声明一个只读的常量。一旦声明，常量的值就不能改变。

• 只在声明所在的块级做用域内有效。
• const命令声明的常量也是不提高，一样存在暂时性死区，只能在声明的位置后面使用。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

本质

const实际上保证的，并非变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，所以等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是否是可变的，就彻底不能控制了。所以，将一个对象声明为常量必须很是当心。

const foo = {};

// 为 foo 添加一个属性，能够成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另外一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

若是真的想将对象冻结，应该使用Object.freeze方法。

const foo = Object.freeze({});

// 常规模式时，下面一行不起做用；
// 严格模式时，该行会报错
foo.prop = 123;