搞懂ES6的import export

引言

說來慚愧，這兩個關鍵字幾乎每天在寫，可是本身寫的模塊export出去的對象，import竟然拿不到，也是沒誰了😟。痛定思痛，仍是寫篇博客加深一下記憶。

import的方式

import有如下幾種使用方式：

import a from './module.js'

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

import deflt, {a} from './module.js'

import * as a from './module.js'

export的幾種方式

export const a = 1 //export後面是一個表達式

export function b(){} //export後面是一個函數聲明語句

export default {c: 1} //export default

export default 後面不能跟賦值表達式

import到底import了誰

其實就是個連線題。一個模塊export的對象有兩種，一種是經過export default導出的，另外一種是經過export導出的。經過export default導出的能夠用如下方式接收：

import defaultObj from 'module'

經過export導出的對象有如下兩種接收方式：

// 導出
export const a = 1;


// 導入時

// 方式一
import * as md from 'module'

// md 拿到了全部用export方式導出的對象，這些對象都做爲md的屬性

md.a // 1

// 方式2，直接對*解構
import {a} from 'module'

搞兩年前端了，這還沒搞清楚，有點說不過去了。。

使用 as 重命名

有時候，模塊裏的變量名和本地的變量名可能會出現命名衝突，這時能夠使用 as 關鍵字起個別名。能夠給默認導出的default變量，導出的某一個模塊變量，或者給*這個命名空間直接命名

import * as name from "module-name";
import defaultExport, * as name from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";

參考

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import