# ES6 ## Default Parameters（默認參數） 在 ES5 中定義默認參數需要一下這樣： ```javascript function fun(a) { var a = a || 'default value'; console.log(a); } fun('a'); //log a fun(); //log default value fun(0); //log default vaule (error) ``` 但是這樣存在一個問題：如果傳入的參數 a 為 0，那 fun() 方法就會出錯，因為 0 代表 false。 在 ES6 中，我們可以這樣定義默認參數： ```javascript function fun(a = 'default value') { console.log(a); } //不僅代碼更加簡潔，而且不容易出錯。 fun('a'); //log a fun(); //log default value fun(0); //log 0 ``` > 定義默認參數的方式類似于 Ruby。 ## Template Literals （模板文本） 在 ES6 之前用比變量拼接字符串： ```javascript var first = 'firstName'; var last = 'lastName'; var name = 'My name is:' + first + '.' + last; ``` 在 ES6 中因為支持模板文本，所以可以寫成這樣： ```javascript var first = 'firstName'; var last = 'lastName'; var name = `My name is ${first}.${last}`; ``` > 注意：模板文本變量的開頭和結尾不是單引號，而是反引號。 ## Multi-line Strings（多行字符串） 在 ES6 中支持反引號的多行字符串。 例如： ```javascript var str = `Hello, My name is RN.` ``` ## Destructuring Assignment（解構賦值） 我們在編碼的過程中經常定義許多對象和數組，然后有組織地從中提取相關的信息片段。 在ES6中添加了可以簡化這種任務的新特性：解構。 解構是一種打破數據結構，將其拆分為更小部分的過程。 下邊舉一個簡單的例子： 在 ES5 中，我們如果想獲取一個對象中的屬性的值的話，一般寫成這樣： ```javascript var person = { name: 'MyName', age: 20, } var name = person.name; var age = person.age; console.log(name); //log MyName console.log(age); //log 20 ``` 在 ES6 中我們有更簡單的寫法： ```javascript var person = { name: 'MyName', age: 20, } var { name, age } = person; console.log(name); //log MyName console.log(age); //log 20 ``` > 結構賦值同樣支持數組。 ## Enhanced Object Literals（增強的對象字面量） ## Arrow Functions（箭頭函數） 箭頭函數，屬于匿名函數，使用 => 來定義函數。 下邊是同一個函數，使用不同寫法的對比： ```javascript var name = 'XiaoMing'; //es5 (function (name) { console.log(`Hello, everyone! My name is ${name}`) })(name) //es6 var fun = (name) => { console.log(`Hello, everyone! My name is ${name}`) } fun() //log Hello, everyone! My name is Xiaoming ``` ## Promises Promise 對象用于一個異步操作的最終完成（或失敗）及其結果值的表示。簡單點說，它就是用于處理異步操作的，異步處理成功了就執行成功的操作，異步處理失敗了就捕獲錯誤或者停止后續操作。 ## 狀態 Promise 有三種狀態，分別是 pending, fulfilled, rejected。 - pending，初始狀態,也稱為未定狀態，就是初始化 Promise 時，調用 executor 執行器函數后的狀態。 - fulfilled，完成狀態，意味著異步操作成功。 - rejected，失敗狀態，意味著異步操作失敗。 ## 狀態轉化 - 操作成功，pending -> dfulfilled - 操作失敗，pending -> rejected ## 方法 ### then() then() 調用后返回一個 Promise 對象，意味著實例化后的 Promise 對象可以進行鏈式調用，而且這個 then() 方法可以接收兩個函數，一個是處理成功后的函數，一個是處理錯誤結果的函數。 例如： ```javascript var promise = new Promise(function(resolve, reject) { // 2秒后置為接收狀態 setTimeout(function() { resolve('success'); }, 2000); }); promise.then(function(data){ console.log(data) }, function(error) { console.log(error); }) ``` ### catch() catch() 方法和 then() 方法一樣，都會返回一個新的 Promise 對象，它主要用于捕獲異步操作時出現的異常。因此，我們通常省略 then() 方法的第二個參數，把錯誤處理控制權轉交給其后面的 catch() 函數。 例如： ```javascript var promise = new Promise(function(resolve, reject) { setTimeOut(function() { resolve('success'); }, 2000); }); promise.then(function(data) { console.log(data); }).catch(function(error) { console.log(data); }) ``` ### Promise.all() Promise.all()接收一個參數，它必須是可以迭代的，比如數組。 它通常用來處理一些并發的異步操作，即它們的結果互不干擾，但是又需要異步執行。它最終只有兩種狀態：成功或者失敗。 它的狀態受參數內各個值的狀態影響，即里面狀態全部為fulfilled時，它才會變成fulfilled，否則變成rejected。 成功調用后返回一個數組，數組的值是有序的，即按照傳入參數的數組的值操作后返回的結果。 ### Promise.race() Promise.race() 和 Promise.all() 類似，都接收一個可以迭代的參數，但是不同之處是 Promise.race() 的狀態變化不是全部受參數內的狀態影響，一旦參數內有一個值的狀態發生的改變，那么該 Promise 的狀態就是改變的狀態。就跟 race 單詞的字面意思一樣，誰跑的快誰贏。 ### Promise.resolve() Promise.resolve() 接受一個參數值，可以是普通的值，具有 then() 方法的對象和 Promise 實例。正常情況下，它返回一個 Promise 對象，狀態為 fulfilled。但是，當解析時發生錯誤時，返回的 Promise 對象將會置為 rejected 態。 ### Promise.reject() Promise.reject() 和 Promise.resolve() 正好相反，它接收一個參數值 reason，即發生異常的原因。此時返回的 Promise 對象將會置為 rejected 態。 ## Block-Scoped Constructs Let and Const（塊作用域構造Let and Const） ### let let 類似 var，但是只對 {} 代碼塊中起作用。 ### const 聲明一個只讀的變量，并且需要在聲明的時候賦值。 ## Classes（類） 通過class關鍵字,可以定義類。基本上,ES6的class可以看作只是一個語法糖,它的絕大部分功能,ES5都可以做到,新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法。 ES5 中定義一個類： ```javascript function Person(name,age) { this.name = name; this.age = age; ... } Person.prototype.toString = function() { return (this.name + '的年齡是' + this.age + '歲') } ``` ES6 中定義一個類： ```javascript class Person{ // 構造 constructor(x,y){ this.x = x; this.y = y; } toString(){ return (this.x + "的年齡是" +this.y+"歲"); } } ``` ## Modules（模塊） - 每一個模塊只加載一次， 每一個JS只執行一次， 如果下次再去加載同目錄下同文件，直接從內存中讀取； - 每一個模塊內聲明的變量都是局部變量， 不會污染全局作用域； - 模塊內部的變量或者函數可以通過export導出； - 一個模塊可以導入別的模塊 ### export && import 模塊功能主要由兩個命令構成： 1. export，用于規定模塊的對外接口。 2. import，用于輸入其他模塊提供的功能。 > 可以在 import 模塊的時候使用 as 為引入的模塊重新命名。 ### 說明 1. import 后面的 from 指定模塊文件的位置，可以是相對路徑，也可以是絕對路徑，.js后綴可以省略。如果只是模塊名，不帶有路徑，那么必須有配置文件，告訴 JavaScript 引擎該模塊的位置。 2. import命令具有提升效果，會提升到整個模塊的頭部，首先執行。 3. 由于import是靜態執行，所以不能使用表達式和變量。 4. import 除了指定加載某個輸出值，還可以使用整體加載，即用星號（*）指定一個對象，所有輸出值都加載在這個對象上面。 5. 13.export default命令，為模塊指定默認輸出，這樣就可以在使用 import 命令的時候，不必知道所要加載的變量名或函數名。但是，一個模塊只能有一個 export default。 6. 如果在一個模塊之中，先輸入后輸出同一個模塊，import語句可以與export語句寫在一起。 例如： ```javascript export { foo, bar } from 'module'; // 等同于 import { foo, bar } from 'module'; export { foo, bar }; ``` 7. const聲明的常量只在當前代碼塊有效。如果想設置跨模塊的常量（即跨多個文件），或者說一個值要被多個模塊共享，可以采用下面的寫法: ```javascript // constants.js 模塊 export const A = 1; export const B = 2; // test1.js 模塊 import * as constants from './constants'; console.log(constants.A); // 1 console.log(constants.B); // 2 // test2.js 模塊 import {A, B} from './constants'; console.log(A); // 1 console.log(B); // 2 ```