一直以来 JavaScript 都是通过 var 关键字定义变量。let 和 const 是 JavaScript 里相对较新的变量声明方式。 let 在很多方面与 var 是相似的，但是可以避免在JavaScript里常见一些问题。 const是对let的一个增强，它能阻止对一个变量再次赋值。

var

var 多次声明同一个变量并不会报错。

    var a = 123;    var a = 456;     
    console.log(a); // 输出：456

var 声明的变量作用域是最近的函数作用域

    var b = [];    for (var i = 0; i < 10; i++) {
        b[i] = function () {            console.log(i);
        };
    }    console.log(b[6]()); // 输出：10

以上代码中，变量 i 是 var 声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。

let

ES6新增let和const两个变量声明命令，都具有以下特性：

• 块局作用域；
• 不存在变量提升，一定声明后才能使用；
• 暂时性死区，在代码块内使用let命令声明变量之前，该变量都是不可用的，不受外部变量影响；

• 在相同作用域范围内不允许重复声明

  在相同作用域范围内不允许重复声明

    let a = 123;    // let a = 123; // Error    console.log(a);  // 输出：123

let 声明的变量作用域是最接近的块作用域

    let b = [];    for (let i = 0; i < 10; i++) {
        b[i] = function () {            console.log(i);
        };
    }
    b[6](); // 输出：6

以上代码中，变量 i 是 let 声明的，当前的 i 只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是 6。

const

const 声明是声明变量的另一种方式。与 let 声明相似，但是就像它的名字所表达的，它们被赋值后不能再改变。 const 与 let 不同点在于：

• const 如果声明的变量是简单的值，则不能改变变量的值，修改会报错；
• const 如果声明的是复合类型的变量，则只保证变量地址不变，值可以变；

const 声明的常量，不可重复声明，如果 const 声明的变量是简单的值，则不能改变变量的值。

    const YEAR = 2017;    console.log(YEAR);    // YEAR = 2016; // Error    // const YEAR = 3.1; // Error

对于 const 声明的复合类型的变量，变量名不指向数据，而是指向数据所在的地址。const 命令只是保证变量名指向的地址不变，并不保证该地址的数据不变。

    const foo = { prop: 123 };
    foo.prop = 456;    console.log(foo.prop) // 输出：456    // foo = { prop: 789 }; // Error

解构

解构数组

    let input = [1, 2];    let [first, second] = input;    console.log(first); // 输出：1    console.log(second); // 输出：2

可以在数组里使用…语法创建剩余变量：

    let [first, ...rest] = [1, 2, 3, 4];    console.log(first); // 输出：1    console.log(rest); // 输出：[ 2, 3, 4 ]

对象解构

    let o = { a: "foo", b: 12, c: "bar" }    let { a, b } = o;    console.log(a); // 输出：foo    console.log(b); // 输出：12

在对象里使用…语法创建剩余变量：

    let o = { a: "foo", b: 12, c: "bar" }    let { a, ...passthrough } = o;    let total = passthrough.b + passthrough.c.length;    console.log(total); // 输出：15

展开

展开操作符正与解构相反。 它允许你将一个数组展开为另一个数组，或将一个对象展开为另一个对象。

    let first = [1, 2];    let second = [3, 4];    let bothPlus = [0, ...first, ...second, 5];    console.log(bothPlus); // 输出：[0, 1, 2, 3, 4, 5]

参考资料

• TypeScript官网
• TypeScript中文网
• ECMAScript 6 入门

其他

• 完整代码：https://github.com/guyoung/GyWxappCases/tree/master/TypeScript
• 微信小程序Canvas增强组件WeZRender：https://github.com/guyoung/WeZRender