export default{}這是在複用元件的時候用到的。假設我們寫了一個單頁面元件 A 檔案，而在另一個檔案 B 裡面需要用到它，那麼就要用 ES6 的 import/export 語法 ，在檔案 A 中定義輸出介面 export ，在檔案 B 中引入 import，把引入的元件用起來，這樣就可以複用元件 A 去配合檔案 B 生成 html 頁面了。

為了加深印象特在此總結如下

使用import命令的時候，使用者需要知道所要載入的變數名或函式名，否則無法載入。但是，使用者肯定希望快速上手，未必願意閱讀文件，去了解模組有哪些屬性和方法。

//export-default.js 這是一個模組檔案export-default.js，它的預設輸出是一個函式
export default function () {
  console.log('foo');
}

• 1
• 2
• 3
• 4

//import-default.js
import customName from './export-default';
customName();  //'foo'
//這是的import命令，可以用任意名稱指向export-default.js輸出的方法，這時就不需要知道原模組輸出的函式名。
需要注意的是，這時import
 
命令後面，不使用大括號。

• 1
• 2
• 3
• 4
• 5

其他模組載入該模組時，import命令可以為該匿名函式指定任意名字。

2、export default命令用在非匿名函式前

// export-default.js
export default function foo() {
  console.log('foo');
}

// 或者寫成

function foo() {
  console.log('foo');
}

export default foo;
//上面程式碼中，foo函式的函式名foo，在模組外部是無效的。載入的時候，視同匿名函式載入。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

3、export 加default和加的區別

// 第一組
export default function crc32() { // 輸出
  // ...
}
import crc32 from 'crc32'; // 輸入


// 第二組
export function crc32() { // 輸出
  // ...
};
import {crc32} from 'crc32'; // 輸入

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

第一組是使用export default時，對應的import語句不需要使用大括號； 
第二組是不使用export default時，對應的import語句需要使用大括號。 
export default命令用於指定模組的預設輸出。顯然，一個模組只能有一個預設輸出，因此export default命令只能使用一次。所以，import命令後面才不用加大括號，因為只可能唯一對應export default命令。

4、export default就是輸出一個叫做default的變數或方法，然後系統允許你為它取任意名字

// 正確
export var a = 1;

// 正確
var a = 1;
export default a;

// 錯誤
export default var a = 1;
//上面程式碼中，export default a的含義是將變數a的值賦給變數default。所以，最後一種寫法會報錯。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

5、因為export default 命令的本質是將後面的值，賦給default變數，所以可以直接將一個值寫在export default之後

// 正確
export default 42;

// 報錯 原因這一句報錯是因為沒有指定對外的介面，而前一句指定外對介面為default。
export 42;

• 1
• 2
• 3
• 4
• 5

6、export default命令，輸入模組時就非常直觀了，以輸入 lodash 模組為例

import _ from 'lodash';

• 1

如果想在一條import語句中，同時輸入預設方法和其他介面，可以寫成下面這樣

import _, { each, each as forEach } from 'lodash';

• 1

對應上面程式碼的export語句如下。

export default function (obj) {
  // ···
}

export function each(obj, iterator, context) {
  // ···
}

export { each as forEach };//暴露出forEach介面，預設指向each介面，即forEach和each指向同一個方法。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

7、export default也可以用來輸出類

// MyClass.js
export default class { ... }

// main.js
import MyClass from 'MyClass';
let o = new MyClass();

• 1
• 2
• 3
• 4
• 5
• 6