Hi，大家好，我是Tony，是一個對於JavaScript有些概念的新手。

挑戰第26天~加油！
今天的學習內容是：JavaScript 模組的輸出和輸入

學習內容來自
彭彭老師JavaScript Modules 模組的輸出和輸入
https://www.youtube.com/watch?v=-Zafi9IPJ30&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=31

昨天的學習內容：[Day 25] JavaScript 模組基礎 (Modules)
https://ithelp.ithome.com.tw/articles/10347274

1. 預設的 輸出與輸入

在export輸出時，會用default關鍵字，這就是預設的輸出。
而當使用的是預設的輸出時，
輸入時，就可以使用任意變數名稱來輸入。
下方練習1、練習2可以看到結果是一樣的。

//預設輸出語法
export default 變數名稱;

//預設輸入語法
import 變數名稱 from "模組檔案路徑";

2. 非預設的 輸出與輸入

在非預設的輸入與輸出，
要用大括號{}包裹輸入輸出的變數名稱，
而且兩者的變數名稱必須相同！才能夠對應到。
語法如下：

//輸出語法
export {變數名稱1,變數名稱2,...};

//輸入語法
import {變數名稱1,變數名稱2,...} from "模組檔案路徑";

3. 將兩種方式整合在一起

如果在輸入與輸出時，預設與非預設都要使用到，
分開寫就會很長，所以要整合在一起。
輸出時用非預設方式，寫入{} *資料 as default ，代表預設的方式。
輸入時將資料寫在{}外面。
語法如下：

//輸出語法
export {x as default,變數名稱1,變數名稱2,...};

//輸入語法
import x, {變數名稱1,變數名稱2,...} from "模組檔案路徑";

練習

• 練習1：預設的輸入輸出，變數名稱相同

變數名稱都一樣是x

//模組檔案名稱 lib.js
let x=3;
export default x;

//主程式檔案名稱 main.js
import x from "./lib.js"
console.log(x) //印出結果是3

網頁結果1
印出3

• 練習2：預設的輸入輸出，變數名稱不同

不同的變數名稱，主程式改成y，也是可以執行

//模組檔案名稱 lib.js
let x=3;
export default x;

//主程式檔案名稱 main.js
import y from "./lib.js" //變數名稱變成y
console.log(y) //印出結果是3

網頁結果2
與上面一樣，印出3

• 練習3：非預設的輸入輸出，變數名稱必須要相同

非預設輸出與輸入，變數名稱要用{}大括號包裹。
但並不是每一個輸出，都一定要有對應的輸入方。

//模組檔案名稱 lib.js
let data=[5,6,7];
let obj={x:10, y:2};
export {data,obj};

//主程式檔案名稱 main.js
import {data} from "./lib.js" //只有輸入data，沒有obj
console.log(data) 

網頁結果3
得到data內容5,6,7

• 練習4：整合預設與非預設的輸入輸出

//模組檔案名稱 lib.js
let x="Hello";
let data=[5,6,7];
let obj={x:10, y:2};
export {x as default,data,obj};

//主程式檔案名稱 main.js
import abc,{data} from "./lib.js" //只有輸入data，沒有obj
console.log(abc)
console.log(data) 

網頁結果4

• 練習5：實際應用，數學算術程式

設計一個算術程式，包含兩個數的加法、兩個數的乘法，
輸出時，
利用預設輸出math，可以一次使用兩個功能。
非預設輸出，可以使用個別的功能。

//模組檔案名稱 lib.js
let add=function(n1,n2){
    console.log(n1+n2);
};
let multiply=function(n1,n2){
    console.log(n1*n2);
};
let math={
    add:add, multiply:multiply
};
export default math;
export {add, multiply};

//主程式檔案名稱 main.js
import math from "./lib.js"
import {multiply,add} from "./lib.js"
math.add(5,6)
math.multiply(10,8)
multiply(-1,2)
add(7,21)

網頁結果5
可以看到都有成功執行。

以上就是今天的內容，
對於模組的輸入與輸出也更深的認識，
並且也實際的運用了，
謝謝大家，我們明天見~