ECMAScript6快速入手攻略

简介

ECMAScript 6 是JavaScript的下一个标准，正处在快速开发之中，ECMAScript 6 的目标，是使得JavaScript可以用来编写复杂的应用程序、函数库和代码的自动生成器（code generator）。最新的浏览器已经部分支持ECMAScript 6 的语法，ECMAScript 6 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。

1. let、const 和 block 作用域

let 允许创建块级作用域，ES6 推荐在函数中使用 let 定义变量，而非 var：

var a = 2;{ let a = 3; console.log(a); // 3}console.log(a); // 2

同样在块级作用域有效的另一个变量声明方式是 const，它可以声明一个常量。ES6 中，const 声明的常量类似于指针，它指向某个引用，也就是说这个「常量」并非一成不变的，如：

{ const ARR = [5,6]; ARR.push(7); console.log(ARR); // [5,6,7] ARR = 10; // TypeError}

有几个点需要注意：

let 关键词声明的变量不具备变量提升（hoisting）特性

let 和 const 声明只在最靠近的一个块中（花括号内）有效

当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING

const 在声明时必须被赋值

2. 箭头函数（Arrow Functions）

ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体：

var getPrice = function() { return 4.55;}; // Implementation with Arrow Functionvar getPrice = () => 4.55;

需要注意的是，上面栗子中的 getPrice 箭头函数采用了简洁函数体，它不需要reture 语句，下面这个栗子使用的是正常函数体：

let arr = ['apple', 'banana', 'orange']; let breakfast = arr.map(fruit => { return fruit + 's';}); console.log(breakfast); // apples bananas oranges

当然，箭头函数不仅仅是让代码变得简洁，函数中 this 总是绑定总是指向对象自身。具体可以看看下面几个栗子：

function Person() { this.age = 0;  setInterval(function growUp() { // 在非严格模式下，growUp() 函数的 this 指向 window 对象 this.age++; }, 1000);}var person = new Person();

我们经常需要使用一个变量来保存 this，然后在 growUp 函数中引用：

function Person() { var self = this; self.age = 0; setInterval(function growUp() { self.age++; }, 1000);}

而使用箭头函数可以省却这个麻烦：

function Person(){ this.age = 0;  setInterval(() => { // |this| 指向 person 对象 this.age++; }, 1000);} var person = new Person();

3. 函数参数默认值