前言

ES6 引進模組系統，透過 import/export 語法，讓開發者可以將 JavaScript 程式碼模組化，提供一種更易於組織與管理程式碼的方式。

export 輸出模組

輸出模組的方式分為兩種，一種是預設輸出(default)，另外一種是名稱輸出(named)，每個模組只能有一個預設輸出，但可以有多個名稱輸出。

預設輸出(default)

我們可以同時宣告並且輸出變數或是函式：

export default const a = 1;

export default function() b{};

如果已經事先宣告好要輸出的變數或是函式，則可以直接輸出該變數名稱或函式名稱：

const a = 1;

export default a;

fuction b() {}

export default b;

名稱輸出(named)

我們可以同時宣告並且輸出變數或是函式：

export const a = 1;
export function() b{};

如果已經事先宣告好要輸出的變數或是函式，則透過物件的方式輸出多個變數名稱或函式名稱：

const a = 1;
function() b{};

export { a, b };

我們也可以修改變數或函式的輸出名稱：

const a = 1;
function() b{};

export { a as newA, b as newB };

混合預設輸出與名稱輸出

const a = 1;
function() b{};

export { a as default, b };

以上例子中，變數 a 為預設出書，函式 b 則為名稱輸出。

import 輸入模組

輸入模組的來源分為兩種，就是前面提到的預設輸出(default)與名稱輸出(named)，每個模組輸入的數量是沒有限制的。

輸入來源為「預設輸出(default)」

如果輸入來源為「預設輸出(default)」，我們可以自訂輸入的變數名稱：

import 自訂變數名稱 from '模組路徑';

例如有一個 A.js 模組內容如下：

const a = 1;
export default a;

則我們可以在同資料夾底下的模組輸入：

import aaa from './A.js'

以上例子中，雖輸出的變數名稱為 a，但在輸入時可以使用自訂的變數名稱 aaa。

輸入來源為「名稱輸出(named)」

如果輸入來源為「名稱輸出(named)」，輸入的變數名稱要和輸出的名稱相同：

import { 原輸出變數名稱1, 原輸出變數名稱2, ... } from '模組路徑';

例如有一個 A.js 模組內容如下：

const a = 1;
function b() {};

export { a, b };

則我們可以在同資料夾底下的模組輸入：

import { a, b } from './A.js'

以上例子中，分別輸出變數 a 與函式 b，所以在輸入時必須使用同名的變數與函式名稱。

輸入來源為混合「預設輸出」與「名稱輸出」

如果輸入來源為同時有「預設輸出」與「名稱輸出」，也可以同時輸入：

import 自訂預設輸入變數名稱, { 原輸出變數名稱1, 原輸出變數名稱2, ... } from '模組路徑';

例如有一個 A.js 模組內容如下：

const a = 1;
function() b{};

export { a as default, b };

則我們可以在同資料夾底下的模組輸入：

import a, { b } from './A.js'

總結

到本篇文章為止，我們把之後使用 React 開發專案會用到的 ES6 語法介紹過一遍，這邊再額外列出一些也很實用的語法：預設參數、字串模板、類別，接下來會介紹一連串的 React 基礎用法與觀念囉！