ES6以及import用法

今天知道了ES6（即ECMAScript6）是個什麼東西，其實就是一個JavaScript的標準。體會最深的是JavaScript也可以import別的文件了，相當於引入了模塊特性。記錄一下import的用法。

以下內容轉自：https://segmentfault.com/a/1190000010651936?utm_source=tag-newest，稍作修改。

而我們這裏要說的是在使用import語法引用模塊時，如何正確使用{}。
假如有一個B.js，想要通過import語法引用模塊A.js，那麼可以這麼寫：

// B.js
import A from './A'

而上面的代碼生效的前提是，只有在如下A.js中有默認導出的export default語法時纔會生效。也就是：

// A.js
export default {...}

在這種不使用{}來引用模塊的情況下，import模塊時的命名是隨意的，即如下三種引用命名都是正確的：

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

因爲它總是會解析到A.js中默認的export default。
而下面是使用了花括號命名的方式{A}來導入A.js：

import { A } from './A.js'

上面代碼生效的前提是，只有在模塊A.js中有如下命名導出爲A的export name的代碼，也就是：

export const A = {...}

而且，在明確聲明瞭命名導出後，那麼在另一個js中使用{}引用模塊時，import時的模塊命名是有意義的，如下：

// B.js
import { A } from './A'                 // 正確，因爲A.js中有命名爲A的export
import { myA } from './A'               // 錯誤！因爲A.js中沒有命名爲myA的export
import { Something } from './A'         // 錯誤！因爲A.js中沒有命名爲Something的export

要想上述代碼正確執行，你需要明確聲明每一個命名導出：

// A.js
export const A = {...}
export const myA = {...}
export const Something = {...}

ps: 一個模塊中只能有一個默認導出export default，但是卻可以有任意命名導出（0個、1個、多個），你也可以如下，一次性將他們導入，並且導入時還可以重命名：

// B.js
import A, { myA, Something } from './A'
or
import X, { myA as myX, Something as XSomething } from './A'

ES6具體教程推薦：
阮一峯《ES6入門》