ES6-import & export 怎麼用

ES6 推出了管理 javascript 模組的語法，透過 import、export 可以將每個檔案視為獨立模組，讓檔案不會過於龐大，且可讀性也比較高，每個系統都有相對的模組，在程式碼的管理與組織方便了許多。

要在瀏覽器中運行，我們需先在 HTML 加上模組類型

<script type="module">
  // import要匯入的檔案
</script>

這樣一來，就可以開始做模組管理了！

import & export

export 可以輸出任何類型的資料，如物件、函式與純值等，輸出又分為 default export、named export 兩種
import 是將 export 的檔案匯入，default export、named export 的輸入方式也稍微不太一樣，輸入的數量是沒有限制的

default export(預設匯出)

單一輸出名稱，預設使用 export default，每一個檔案只能有一個 export default

1.可以不指定變數名稱

// export.js
export default {
  name: "bobee",
  age: 11,
  bark: "woof",
};

import dog from "./export.js";
console.log(dog.name); // bobee

2.也可以指定變數名稱， import 裡的名稱可以使用不同的名稱呼叫

🔸 預設單筆

// export.js
const dog = {
  name: "bobee",
  age: 11,
  bark: "woof",
};
export default dog;

import goodDog from "./export.js";
console.log(goodDog.name); // bobee

🔸 預設多筆

// export.js
const dog = {
  name: "bobee",
  age: 11,
  bark: "woof",
};
function add(a, b) {
  return a + b;
}
export default { dog, add };

import goodDog from "./export.js";
console.log(goodDog.dog.name); // bobee

named export(具名匯出)

多個輸出名稱，需先宣告名稱，在 import 時必須使用一樣名稱才能匯出，即使只匯出一個名稱也需加上中括號{}

1.export 每個宣告

// export.js
export const dog = {
  name: "bobee",
  age: 11,
  bark: "woof",
};
export function add(a, b) {
  return a + b;
}

import { dog } from "./export.js"; // 需加上中括號{}
console.log(dog.name); // bobee

2.在結尾時統一使用物件匯出

// export.js
const dog = {
  name: "bobee",
  age: 11,
  bark: "woof",
};
function add(a, b) {
  return a + b;
}
export { dog, add };

import { dog } from "./export.js";
console.log(dog.name); // bobee

import/export 全部資料 使用*

*代表全部的意思，並賦予一個名稱，就可以呼叫你要的東西囉!

// export.js
const dog = {
  name: "bobee",
  age: 11,
  bark: "woof",
};
function add(a, b) {
  return a + b;
}
export { dog, add };

import * as myModule from "./export.js";
console.log(myModule.dog.name); // bobee

import 無需匯出的檔案

若想要單純執行某支檔案程式，則不用帶任何名稱引入即可

import "/export.js";

---

有了 export 跟 import，程式碼可以被模組化，讓系統更好維護提升管理效率，
歡迎路過多多指教，一起學習程式吧 😀

---

Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。