ES6 中有不少新的語法在 React 中有應用到，因此在開始 React 的學習前，我會先整理一些 ES6 的語法或新觀念。由於之前的工作中就有使用 ES6 的經驗，所以這篇中我只會針對自己在 ES6 中比較不熟悉或不理解的觀念做整理，不會有全面性的介紹。由於這次學習過程中，發現自己對 ES6 還有很多不熟悉之處，因此 ES6 的部分我會拆成三天做整理。

es-module 模組化

以往的 JS 是沒有模組化的，後來有陸續提出 CommonJs、AMD、CMD 三大規範來實現，但都不是最好的方式，因此官方在 ES6 提出了 es-module 模組化方案，主要由 export(導出)、import(導入)兩個命令組成，在使用 es-module 時可以將每個 JS 檔當作一個模組，檔案內的變數、函式、類都需要 export 才能在另一個檔案裡用 import 來引用，下面會介紹一些運用方式。

普通導入導出

普通導出變數、導入的變數需要包覆大括號，變數名稱固定

//app1.js
export const count = 10

//app2.js
import { count } from './app1.js'

默認導入導出

會多使用 default 來導出，導入時候不需要包覆大括號，變數名不用固定

const count = 10
export default count

//app2.js
import number from './app1.js'//變數名稱可改變

同時使用普通和默認導入導出

export const Component = {} //導出一個物件
export default = {}

//app2.js
import React, { Component } from './app1.js'//React 是默認導出的 {}，默認導出的變數可以自定義

複合寫法

export { foo, bar } from 'app.js'

//等同於
import { foo, bar } from 'app.js'
export { foo, bar}

使用 * as 整體導入

有時候我們可能會在一隻檔案中導出很多變數、函式

export function getPhone () {
    //...
    return phone
}
export function getMail () {
    //...
    return mail
}

正常導入的話如下

import { getPhone, getMail } from './app1.js'
console.log(getPhone)
console.log(getMail)

用 * as 導入則是將導出的所有東西放在一個 object 中，如下

import * as getData from './app1.js'
console.log(getData.getPhone)
console.log(getData.getMail)

注意事項

1. 普通導出時可以導出 object、聲明表達式，但不能導出已聲明的變數或是無變數聲明的表達式
   無變數聲明：匿名函數 function () {}、class 等等

const count = 100

// 錯誤用法
export count
export 100
export function () {}
export class {}

//正確用法
export const count = 100
export function getPhone () {}
export class Menu {}
export { coubt } 

2. 默認導出時，不能導出聲明表達式，class 例外，因為 export default 其實是導出一個叫做 default 的變數，所以它後面不能跟變數聲明語句。

//錯誤用法
export default const count = 100 

//正確用法
const count = 100
export default count
export default { count }
export default [ count ]
export default function getPhone () {}
export default class Menu {}

3. import 導入的變量是唯讀的，不能改變它

import { a } from './app1.js'

a = {} //error, a is read-only
a.foo = 'hello' //傳參考，可以

展開運算子在 React 中的運用

最後補充一個 React 中展開運算子的使用方式，是我之前曾經看過，但當下沒意識到這是展開運算子的運用(真的是很不熟ˊ ˋ)。ES6 中所謂的展開運算子，是在物件或陣列中展開屬性的一種語法，遵循由右至左，相同屬性則覆蓋的原則。

const base = {name: 'leo', age:25}
const user = {job: 'frontent', ...base} //{job: "frontent", name: "leo", age: 25}

在 React 中可以像下面一樣運用

class UserComponent extends Component {
  render () {
    const user = {name: 'leo', age:25}
    return <div>
      <UserPage {...user} />
      <!--    等同於    -->
      <UserPage name="leo" age="25" />
    </div>
  }
}

小結

這一篇主要是整理 JS 模組化以及展開運算子的一些運用，這些語法雖然過去都曾經看過或使用過，然而當時並不是真的很清楚運作的方式，因此透過這次學習，再做進一步的了解並整理。下一篇將會整理 ES6 中 class、decorator 以及箭頭函式的運用方式。