6、ES6
6.1 什麼是ES6
編程語言JavaScript是ECMAScript的實現和擴展 。ECMAScript是由ECMA（一個類似W3C的標準組織）參與進行標準化的語法規範。ECMAScript定義了：
[語言語法] – 語法解析規則、關鍵字、語句、聲明、運算符等。
[類型]– 布爾型、數字、字符串、對象等。
[原型和繼承]
內建對象和函數的
[標準庫] – [JSON]、[Math]、[數組方法]、[對象自省方法]等。
ECMAScript標準不定義HTML或CSS的相關功能，也不定義類似DOM（文檔對象模型）的[Web API]，這些都在獨立的標準中進行定義。ECMAScript涵蓋了各種環境中JS的使用場景，無論是瀏覽器環境還是類似[node.js]的非瀏覽器環境。
ECMAScript標準的歷史版本分別是1、2、3、5。
那麼爲什麼沒有第4版？其實，在過去確實曾計劃發佈提出巨量新特性的第4版，但最終卻因想法太過激進而慘遭廢除（這一版標準中曾經有一個極其複雜的支持泛型和類型推斷的內建靜態類型系統）。
ES4飽受爭議，當標準委員會最終停止開發ES4時，其成員同意發佈一個相對謙和的ES5版本，隨後繼續制定一些更具實質性的新特性。這一明確的協商協議最終命名爲“Harmony”，因此，ES5規範中包含這樣兩句話
ECMAScript是一門充滿活力的語言，並在不斷進化中。
未來版本的規範中將持續進行重要的技術改進
2009年發佈的改進版本ES5，引入了[Object.create()]、[Object.defineProperty()]、[getters]和[setters]、[嚴格模式]以及[JSON]對象。
ECMAScript 6.0（以下簡稱ES6）是JavaScript語言的下一代標準，2015年6月正式發佈。它的目標，是使得JavaScript語言可以用來編寫複雜的大型應用程序，成爲企業級開發語言。
6.2 Node.js中使用ES6
ES6+ 太棒了,但是很多高級功能node是不支持的,就需要使用babel轉換成ES5
（1）babel轉換配置,項目根目錄添加.babelrc 文件
{
"presets" : ["es2015"]
}
（2）安裝es6轉換模塊
cnpm install babel-preset-es2015 --save-dev
（3）全局安裝命令行工具
cnpm install babel-cli -g
（4）使用
babel-node js的文件名
6.3 語法新特性
6.3.1 變量聲明let
我們都是知道在ES6以前，var關鍵字聲明變量。無論聲明在何處，都會被視爲聲明在函數的最頂部(不在函數內即在全局作用域的最頂部)。這就是函數變量提升例如
function aa() {
if(bool) {
var test = 'hello man'
} else {
console.log(test)
}
}
以上的代碼實際上是:
function aa() {
var test // 變量提升
if(bool) {
test = 'hello man'
} else {
//此處訪問test 值爲undefined
console.log(test)
}
//此處訪問test 值爲undefined
}
所以不用關心bool是否爲true or false。實際上，無論如何test都會被創建聲明。
接下來ES6主角登場：
我們通常用let和const來聲明，let表示變量、const表示常量。let和const都是塊級作用域。怎麼理解這個塊級作用域？在一個函數內部 ，在一個代碼塊內部。看以下代碼
function aa() {
if(bool) {
let test = 'hello man'
} else {
//test 在此處訪問不到
console.log(test)
}
}
6.3.2 常量聲明
const 用於聲明常量，看以下代碼
const name = 'feifei'
name = 'yaya' //再次賦值此時會報錯
6.3.3 模板字符串
es6模板字符簡直是開發者的福音啊，解決了ES5在字符串功能上的痛點。
第一個用途，基本的字符串格式化。將表達式嵌入字符串中進行拼接。用${}來界定。
//es5
var name = 'feifei'
console.log('hello' + name)
//es6
const name2 = 'yaya'
console.log(`hello ${name2}`) //hello yaya
第二個用途，在ES5時我們通過反斜槓(\)來做多行字符串或者字符串一行行拼接。ES6反引號(``)直接搞定。
// es5
var msg = "Hi \
man!"
// es6
const template = `<div>
<span>hello world</span>
</div>`
6.3.4 函數默認參數
ES6爲參數提供了默認值。在定義函數時便初始化了這個參數，以便在參數沒有被傳遞進去時使用。看例子代碼
function action(num = 200) {
console.log(num)
}
action() //200
action(300) //300
6.3.5 箭頭函數
ES6很有意思的一部分就是函數的快捷寫法。也就是箭頭函數。
箭頭函數最直觀的三個特點。
1不需要function關鍵字來創建函數
2省略return關鍵字
3繼承當前上下文的 this 關鍵字
看下面代碼
//ES5用法
function add(a,b){
return a+b;
}
console.log(add(100,200));
//ES6用法
add2 = (a,b) => {
return a+b;
}
console.log(add2(100,200));
//省略return關鍵字
add3 = (a,b) => a+b;
console.log(add3(100,200));
6.3.6 對象初始化簡寫
ES5我們對於對象都是以鍵值對的形式書寫，是有可能出現鍵值對重名的。例如
function people(name, age) {
return {
name: name,
age: age
};
}
以上代碼可以簡寫爲
function people(name, age) {
return {
name,
age
};
}
6.3.7 解構
數組和對象是JS中最常用也是最重要表示形式。爲了簡化提取信息，ES6新增瞭解構，這是將一個數據結構分解爲更小的部分的過程。
ES5我們提取對象中的信息形式如下
const people = {
name: 'feifei',
age: 20
};
const name = people.name;
const age = people.age;
console.log(name + ' --- ' + age);
是不是覺得很熟悉，沒錯，在ES6之前我們就是這樣獲取對象信息的，一個一個獲取。現在，ES6的解構能讓我們從對象或者數組裏取出數據存爲變量，例如
const people = {
name: 'feifei',
age: 20
};
const { name, age } = people;
console.log(`${name} --- ${age}`);
//數組
const color = ['red', 'blue'];
const [first, second] = color;
console.log(first); //'red'
console.log(second); //'blue'
6.3.8 Spread Operator
ES6中另外一個好玩的特性就是Spread Operator 也是三個點兒...接下來就展示一下它的用途。 組裝對象或者數組
//數組
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]
//對象
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
6.3.9 import 和 export
import導入模塊、export導出模塊
lib.js
let fn0=function(){
console.log('fn0...');
}
export {fn0}
demo9.js
import {fn0} from './lib'
fn0();
注意：node(v8.x)本身並不支持import關鍵字，所以我們需要使用babel的命令行工具來執行（配置詳見6.2小節內容）
babel-node demo9