ES6中export default 與export區別

 說明

export與export default均可用於導出常量、函數、文件、模塊等，有什麼區別呢？

export的方式 - 1次導出1個或者多個

//a.js
export const name = "貓寶寶";
export function cat() { }


//b.js
import { name , cat} from 'a'//導入的時候需要花括號

export default的方式 - 1次導出多個

//a.js
const name = "貓寶寶";
function cat() { }

export default {
    name,
    cat
}

//b.js
import custom  from 'a'; //導入的時候沒有花括號，custom是自定義的名稱，此處custom = {name,cat}
console.info(custom.name)
console.info(custom.cat)

export default的方式 - 1次導出1個

//a.js
const name = "貓寶寶";

export default name


//b.js
import name from 'a' //導入的時候沒有花括號

 

總結

• 在一個文件或模塊中，export、import可以有多個，export default僅有一個
• 通過export方式導出，在import時導入時需要加{ }
• 通過export default，在import時導入時不需要加{ }
• 使用export default命令，爲模塊指定默認輸出，不需要知道加載模塊的變量名

//導入的時候沒有花括號