函式(function)

箭頭函式在 JavaScript 中改寫原本 function 的撰寫方式。除了較短的語法外,它們在保持this 關鍵字範圍方面也有優勢 參見這裡,此外在 ESLint 中官方也建議使用箭頭函式取代傳統寫法。

函式 (function) 又稱方法 (method),用於程式碼過多重複時定義一個方法來去重複呼叫他來解省我們的開發效率,以下為範例:

原本寫法

// 使用有名稱的函式
function sum(a, b){
    return a+b;
}

// 常數指定為匿名函式
const sum = function(a, b) {
    return a+b;
}

Comment

迴圈

迴圈總共分為三種寫法分別有 for、while、do while,其中最常見也被最常使用的就非 for 迴圈莫屬了,故這邊就先只提 for 一種。

for 語句

for 迴圈的小括號內有三個參數用分號隔開,它們各自有其功用,for迴圈的基本語法如下:

  • 參數一控制變數初始值
  • 參數二設定週期
  • 參數三設定每次間隔
for (let i = 0 ; i < 10 ; i +=1){
    console.log(i);
}

這邊值得一提的是我並不是使用 i++ 做每次間隔,由於 ESLint 建議Unary operator '++' used. (no-plusplus) 不要使用 ++ -- 官方是這樣說的

Why? Per the eslint documentation, unary increment and decrement statements are subject to automatic semicolon insertion and can cause silent errors with incrementing or decrementing values within an application. It is also more expressive to mutate your values with statements like num += 1 instead of num++ or num ++. Disallowing unary increment and decrement statements also prevents you from pre-incrementing/pre-decrementing values unintentionally which can also cause unexpected behavior in your programs.

簡單來說使用一元遞增(減)會導致程序中的意外行為所以盡量不要使用

Comment

JavaScript 歷史與發展

各位先前可能聽過 ECMAScript 若不知道也沒關係,ES6的出現就他有關係,在1995年時 Netscape(網景)公司與 Sun(昇陽)公司合作 設計一個網頁程式語言名為 JavaScript 名稱屬 Sun(昇陽)公司擁有,後來被Oracle(甲骨文)公司所收購。1996年11月,網景公司將 JavaScript 提交給歐洲計算機製造商協會(ECMA)進行標準。各位可以發現ES4為什麼沒釋出?由於此版本更新幅度太大更新許多功能,怕龐大的變動讓使用者吃不消所以最後決定每年固定釋出更新直到最近的 ES6、ES7。

規格與版本

  • ECMA-262的第一個版本於1997年6月被 ECMA 組織採納
  • ECMAScript 3 (ES3) 發行於1999年底
  • ECMAScript 4 (ES4) 棄用(原因是貿然大幅度更新對用戶不太好所以改成每年逐一釋出)
  • ECMAScript 5 (ES5) 發行於2009年底
  • ECMAScript 6 (ES6) 發行於2015年中,為目前最新的官方版本

Comment

控制流程

任何一種程式語言程式碼都是由上而下逐一執行的,此外有時候必須程式判斷依照不同的數值給予不同的路徑輸出,稱之為控制流程。

區塊(block)

ES6 中新增了程式區塊是用大括號包起來的區域:

{
  statement 1
  statement 2
  ...
  statement n
}

Comment

React-router和React-router-dom的選擇

很多剛使用react的同學在接觸到react-router的時候就會很蛋疼,什麼react-router和react-router-dom?
往往開始會比較懵逼,下面我們就來一探究竟。

React-router

React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它沒有提供dom操作進行跳轉的api。

React-router-dom

React-router-dom提供了BrowserRouter, Route, Link等api,我們可以通過dom的事件控制路由。
例如點擊一個按鈕進行跳轉,大多數情況下我們是這種情況,所以在開發過程中,我們更多是使用React-router-dom。安裝很簡單npm i react-router-dom --save,安裝了淘寶鏡像的就用cnpm吧。

React-router-dom的核心用法

HashRouter和BrowserRouter

它們兩個是路由的基本,就像蓋房子必須有地基一樣,我們需要將它們包裹在最外層,我們只要選擇其一就可以了。現在講它們的不同:

HashRouter

如果你使用過react-router2或3或者vue-router,你經常會發現一個現象就是url中會有個#,例如localhost:3000/#,HashRouter就會出現這種情況,它是通過hash值來對路由進行控制。如果你使用HashRouter,你的路由就會默認有這個#。

這就是HashRouter的使用情況。下面是對應的代碼。

ReactDOM.render(
    <HashRouter>
        <Router path="/" component={home}></Route>
    </HashRouter>
),document.getElementById('root'));

Comment

Copyright © 2018 ucamc