javascript中export 和export default的區別

2022-07-22 10:01:14

前言

在前端開發過程中，實現模組化使用是前端三大重要思想之一，也是前端開發者必須要精通的點，而且在前端求職面試中也是必考知識點。在ES6中，引入了模組化理念，設計思想就是在編譯時候就能確定模組的依賴關係，以及輸入和輸出的變數，其中就包含匯出和匯入兩個模組。那麼本篇博文就來分享一下關於匯出的時候export 和 export default的區別，關於匯入相關的內容會在另外的文章中介紹，這裡只介紹匯出相關的內容，記錄一下，方便查閱使用。

export

1、基本用法

模組通過export匯出各種型別的變數，如字串，數值，函數，類。基本用法如下所示：

匯出的函數宣告與類宣告必須要有名稱（export default 另外考慮）。

不僅能匯出宣告還能匯出參照（如函數）。

export 命令可以出現在模組的任何位置，但必需處於模組的頂層。

注意：在使用export匯出的時候，建議使用大括號指定所要輸出的一組變數在檔案結尾部分，明確匯出的介面；函數和類都要有對應的名稱，匯出檔案尾部會避免無對應的名稱的情況。

2、as用法

使用export命令匯出介面名稱的時候，需要與模組內部的變數有一一對應的關係；匯入的變數名稱也需要和匯出的介面名稱一致，但是順序可以不用一致。

不同模組匯出介面名稱重複的時候，需要使用as重新定義變數名，相當於做一個“等價轉換”的操作。

3、複合使用

在實際使用中，export 與 import 可以在同一模組同時複合使用，複合使用的特點如下所示：

可以將匯出的介面改名，包括 default。

複合使用 export 與 import 的時候，也可以匯出全部，當前模組匯出的介面會覆蓋繼承匯出的介面。

4、使用範例

範例一：

/*-----export [dome.js]-----*/
 
let name = "Jack";
let age =30;
let fun = function(){ return "My name is" + name + "! I'm '" + age + "years old." }
let mClass = class mClass { static aaa = "Hello!"; }
export { name, age, fun, mClass }

範例二：

/*-----export [demo1.js]-----*/
let name = "Jack";
export { name as exportName }
 
 
/*-----export [demo2.js]-----*/
let name2 = "Jack";
export { name2 }
 
 
/*-----export [demo3.js]-----*/
let name3 = "Jack";
export { name3 }

範例三：

export { foo, bar } from "methods"; // 大約等同於約下面兩段語句，不過上面匯入匯出方式的該模組沒有匯入 foo 與 bar
 
 
import { foo, bar } from "methods";
export { foo, bar };
export { foo as bar } from "methods";  // 普通情況下的改名
export { foo as default } from "methods";  // 把 foo 轉導成 default
export { default as foo } from "methods";  // 把 default 轉導成 foo
export * from "methods"; // *號型別

export default

1、基本用法

在一個檔案或模組中，export default僅有一個匯出，基本用法如下所示：

export default 中的 default 是對應的匯出介面變數。
模組在通過export default 在做匯出的時候，使用匯入時則不需要加{ }。
在使用export default 向外暴露的成員的時候，可以使用任意變數來接收。

2、使用範例

var a = "My name is Jack!";
export default a; // 僅有一個匯出
 
 
export default var c = "error";  // error，default 已經是對應的匯出變數，不能跟著變數宣告語句
import b from "./xxx.js"; // 不需要加{}， 使用任意變數接收

區別

1、相同部分

1⃣️export 和 export default都是通過import匯入的；

2⃣️export 和 export default都是用來匯出的，如常數、函數、檔案、模組等等。

2、不同部分

1⃣️在一個檔案或模組中，export的匯出可以有多個，但是export default僅有一個匯出。也就是輸出單個變數使用export default，輸出多個變數使用export；

2⃣️模組在通過 export 方式匯出的時候，在使用匯入時要加{ }，而export default 在做匯出的時候，使用匯入時則不需要；

3⃣️使用 export default給模組指定預設匯出的時候，匯入時候只需要拿到檔案名字即可；使用 export匯出的時候，必須知道匯出的函數或者變數等，匯入的時候變數名需要和匯出時的名字保持一致。

拓展：import匯入

1、基本用法

基本用法如下所示：

模組通過import匯入各種型別的變數，如字串，數值，函數，類。
import 命令會提升到整個模組的頭部，首先執行。

2、特點

唯讀屬性：不允許在載入模組的指令碼裡面，改寫介面的參照指向，即可以改寫 import 變數型別為物件的屬性值，但不能改寫 import 變數型別為基本型別的值。

單例模式：多次重複執行同一句 import 語句，那麼只會執行一次，而不會執行多次。import 同一模組，宣告不同介面參照，會宣告對應變數，但只執行一次 import 。

靜態執行特性：import 是靜態執行，所以不能使用表示式和變數。

3、使用範例

範例一：

import {a} from "./aaa.js"
 
a.foo = "hello";  // a = { foo : 'hello' }

範例二：

import { a, b } from "./xxx.js";  //匯入多個變數的寫法

最後

通過上面介紹的關於前端開發中export 和 export default的區別的相關知識點，在實際開發中，這也是在開發過程中必用的功能，尤其是對於初中級開發者來說，更應該掌握這些情況的使用，更多相關javascript export和export default內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！