Yesterday is history, tomorrow is a mystery, today is a gift of God, which is why we call it the present. ― Bill Keane 今天要講解的東西很輕鬆，就是用指令去建立一個React的專案。 –預備知識–
在ES6，var開始出現分身，就是let和const! 簡單來說，它們的功用都是用來定義變數，實際舉例: var number = 5; let number = 5; const number = 5; 一般區別在於let所命名的變數是可變的，const所命名的變數則是不可變的。 其實還有Scope的問題，但暫且不討論那一塊。
箭頭函數 ES6
接下來比較大的改變莫過於箭頭函數，若沒有事先了解，肯定出現ES5和ES6是不同程式語言的錯覺。
ES5函數
首先先來看看ES5的函數寫法:
1 2 3 4 5
function say(name){ console.log(name + " Hey! You cool!"); }
say('Johnny');
在ES5撰寫函數的時候，會先寫下function這個關鍵字建立函數，接著再寫上函數的名稱，以本例來說say就是函數的名稱，往後在呼叫這個函數時則要寫上say，而括號()內則填入參數，所以呼叫時我在這裡傳入Johnny，這就是ES5典型的函數呼叫方式。 實際在JSbin執行過後可以得到結果是"Johnny Hey! You cool!"
ES6函數
根據ES5的函數寫法，我們來改寫成ES6的箭頭函數:
1 2 3 4
const say = (name) => { console.log(name + " Hey! You cool!"); } say('Johnny');
一般來說要將ES6寫成等同於ES5的程式碼都必須指派到某變數，同樣可以根據函數是否會更動而宣告為let或者是const。我們可以看到參數的傳遞寫在等號後方，接著才接上箭頭函數。好處在於簡潔的語法外，最重要的優點在於this關鍵字的範圍變得更加明瞭，而不會像ES5函數的this常常會超出我們所想。 同樣在JSbin執行過後可以得到結果也是"Johnny Hey! You cool!"
TIP: 單一參數，箭頭函數可以簡化成下方寫法:
1
const say = name => console.log(name + " Hey! You cool!");
無參數或多參數，括號()不得省略:
1 2
const say = () => console.log("Hey! You cool!"); const say = (fname, lname) => console.log(fname + " " + lname + " Hey! You cool!");
觀念釐清 Export & Import
在專案當中，把程式模組化是一件相當明智的選擇。 首先模組化的檔案必須先匯出Export，才能由其他程式匯入Import後使用。 匯出Export有兩種方式，我們以ES6的函數為例: –預設匯出– export default say
–命名匯出– export const say = (name) => console.log(" Hey! You cool!") export const name = "Johnny" 預設匯出的檔案只有一個模組，以上例來說就是只匯出say這個函數，命名匯出則是會根據名稱匯出不同的模組，以上例來說就是匯出say這個函數外，還能夠再匯出其他函數或變數。
匯入Import則會根據匯出的方式對應: –預設匯入– import say from './say.js' 當然say可以當成alias任意命名，如下: import greet from './say.js'
–命名匯入– import {say} from './say.js' import {name} from './say.js' 可以清楚看到若是預設匯入則可以任意命名，但若是命名匯入則必須指定要匯入的函數或變數等等。 總結來看，一個檔案只能包含一個預設匯出及數個命名匯出，因此若檔案包含數個模組或變數等，我們也可以一次匯入所有的模組如下: import * as all from './say.js 存取則可以透過all.say和all.name存取我們匯出的模組或變數。
url: http://Mizukikouyou.github.io permalink: :year/:month/:day/:title/ permalink_defaults: pretty_urls: trailing_index: true # Set to false to remove trailing 'index.html' from permalinks trailing_html: true # Set to false to remove trailing '.html' from permalinks
1 2 3 4
deploy: type: git repo: https://github.com/Mizukikouyou/Mizukikouyou.github.io branch: main
最後執行以下的指令 >hexo d 就可以在你自己的github名稱的github.io裡面看到Git Pages與Hexo成功的搭載上去啦! 以上就是今天的Hexo系列文的第一篇!
