JavaScript ES6的import, export, default使用方法

4 min readSep 25, 2018

最近再跟學弟做一個專案, 要寫app跟web, 我本來是負責後端, 但是看到它一個人事情又多又有課業忙不過來, 決定跳下來幫他的web端, 原本是想說不過就是網站, mvc什麼的也都很熟了應該難不倒我吧, 對於從沒碰過現在最新的前端三大框架的我來說馬上就吃到閉門羹

首先是我沒有很認真的學過js, 因為這套語言真的是讓人又愛又恨, 總覺得很多地方都很混亂沒有規範好, 然後語言的特色又融合各家語言, 風格從c++, java到python都有一點感覺, 導致我覺得真的不是讓人很喜歡, 然後在新手剛開始學又有ES5 跟 ES6傻傻分不清楚的教學文件(目前都是ES6了,所以看到ES5的就自行斟酌), 我遇到困擾我很久但卻是一個小問題, 決定在這邊筆記一下, 幫自己釐清也讓大家能查閱
以下開發前端框架為React

首先我遇到一個問題
以下是情境

index.js

import {Hello} from “./hello”;class Home extends.React.Component{
…
 render () {
 return (
 <Hello/>
 )
 };
}

hello.js

export default Hello extends React.Conponent{
 render () {
 return (
 <h1>Hello,World</h1>
 ) 
 };
}

簡單來說就是用hello.js去包裝好一個物件在傳給index.js去使用, 然而上面這段在render的時候就是會出錯, 我百思不得其解, 也找學弟來幫看, 到底是哪邊出了問題, 結果它跟我說把


import {Hello} from “./hello”;
改成
import Hello from “./hello”;

就好了耶,

這雖然解決了我的問題, 但總覺得不搞清楚就是對不起我浪費掉的那些時間, 所以就直接去研究這個import 跟 export的定義跟方法到底是怎樣

原來問題是出在這個default

defalut的意思是指, 這個module的可以有一個default指定的項目, 而這個 default的element可以是Object, Function, Class, 所以這也是為什麼, 我們不用加上 “{}”這樣大括號的緣故, 因為用default就說明這個module的這個element被定義為default, 而不再是它原先的名字

而這default也很有趣

一般來說如果import module裡的element我們想要改別名都要這樣做

import { member as alias } from “module-name”;
import { member1 , member2 as alias2 , […] } from “module-name”;

就是必須先加上一個大括號, 並在原來要改的member中用 as去alias
例如, 假設舉個例子

import {tensorflow as tf} from “tensorflow-module”

但如果說,這個module的export 有加上default


import myDefault from ‘my-module’;// 實際上等於:
import {default as myDefault} from ‘my-module’;

所以我們的例子變成

import Hello from ‘./hello’;// 實際上等於:
import {default as Hello} from ‘./hello’;

這邊就是讓人會搞混的地方所以正確來說名稱之所以可以直接引入myDefault不是因為default允許, 是因為它會自動把default值alias成myDefault, 所以如果改成

import HelloTheNew from ‘my-module’;

一樣會成功

也可以使用default與其他export成員共存同一個模組,而default會最先被定義, 如下方例子：

import myDefault, * as myModule from ‘my-module’;// myModule 會成為一個 { } 物件，它的屬性成員為 my-module.js 所有 export 的項目

到這邊也就釐清了我所有的問題了, 還在學習如有錯誤都歡迎指正, 謝謝

JavaScript ES6的import, export, default使用方法

Written by ss