Skip to main content

2-4

Loop labels​

// 替迴圈做標籤，使其用在 break 或 continue 等操作上
loop1: for (var i = 0; i < 4; i++) {
    loop2: for (var j = 0; j < 5; j++) {
        if (i === 1) {
            continue loop1
        }
        console.log('loop1', i, 'loop2', j)
    }
}

Map 物件​

Set 物件​

Binary Math​

  • 在 JavaScript 的小數點計算中，0.1 + 0.2 = 0.30000000000000004，此原因為電腦計算是用二進制，在某些值會有無窮小數的產生，相同於我們常用的十進制中 1/3 + 2/3 的情況，0.333333..... + 0.666666...... != 1。
  • 在此情況下若要判斷某個小數點的話要用範圍，例如: X >= 0.3 && X <= 0.30001 用小範圍判斷

console.time()​

console.time('timer')
for(let i=1; i<=10000000; i++) {}
console.timeEnd('timer')
// timer: 4.34765625 ms
  • console.time() 執行時會開始計時直到執行 console.timeEnd() 才會結束計時，傳入的參數字串類似 timeID 用於分別是哪個計時。

console.assert()​

let someValue = 50
console.assert(someValue === 5000, 'error message')
// Assertion failed: console.assert
  • console.assert() 會根據第一個參數布林值來印出 log，ture 不會印出，false 會有 error 印出
  • 第二個參數為選填，用於輸出時的訊息文字

Redux toolkit​

  • 因 Redux 本身概念有很多種實作方式且需要編寫重複性高的 code，故 Redux 官方推出了 Redux toolkit 工具提供標準實作與簡化使用 Redux。
  • toolkit 提供了許多 API 能很輕易的建立 Redux 的三大核心：store、action、reducer
  • 在 reducer 中做變更 store 的事情一定要用 pure function 來 return 新的值做更新，但在 Redux toolkit 中定義的 reducer 裡使用了 immer library 讓我們可以直接變更 store 的值來更新。
  • Avoid putting non-serializable values such as Promises, Symbols, Maps/Sets, functions, or class instances into the Redux store state or dispatched actions. (簡言之 store 存的與 action 的 payload 不能是 stringfy 不了的物件，若有 middleware 將 action.payload 做處理轉成 serializable values，則可以在 payload 傳 non-serializable values，但個人覺得實作上還是盡量統一)
  • 處理非同步行為的 middleware， Redux toolkit 有結合 redux-thunk 並提供 createAsyncThunk API 建立 promise，並會在 promise 的三個週期 dispatch action。
  • 以 slice 為概念單位區分不同的 store data。

Git push -u​

  • -u 參數主要將目前分支與遠端 origin 的 mybranch1 分支建立關聯，若遠端沒有則會建立該分支
  • 此後在目前分支直接下 git push 即可，可省略後面參數
git push -u origin mybranch1

  • —set-upstream 是指定本地與遠端 origin 已有的分支建立關聯
git branch —set-upstream-to=origin/mybranch1 mybranch1

Git origin​

  • origin 為常用的遠端 repository 名稱，也能改為其他名稱：若改成 myremote，則變成 git push myremote master
  • Github clone 下來的 repository，預設遠端 repository 名稱為 origin

React-Router 中 match 的 path 和 url​

  • match.url 取得實際的路徑值字串
  • match.``path 取得路徑格式字串
  • 舉例：url → users/5, path → /users/:userId
  • 一般使用場景 match.url 常用在 <Link> 指定實際的路徑，match.path 常用在 <Route> 匹配特定格式的路徑
  • 根據特定需求有時 <Route> 也會使用 match.url 作為前綴的匹配路徑

Open API​

網頁本身轉址​

  • 程式碼如下：在解析 HTML 時到這段 0秒後就會 redirect 到指定的 url
<meta http-equiv="refresh" content="0;url=https://ithelp.ithome.com.tw/questions/10203024" />
  • content 第一個參數是幾秒後做 refresh 動作
  • 後面沒有 url 參數的話，就是幾秒後 refresh 目前的網頁

React list index​

  • 與 Vue 類似，以陣列渲染出多個元素時，需要給定 unique key 才能在畫面更新時辨識
  • 若以陣列 index 做 key 的話，只要陣列排序有改動，就會造成整個陣列元素重新渲染，以效能來說是不好的
  • 而 Redux Toolkit 本身有包含 nanoid 的 function，可以方便在資料本身沒有 ID 時做使用
  • 在 Vue 中同個頁面的不同陣列渲染元素若有重複的 key 會有 warning，在 React 中，不同陣列渲染的元素有重複的 key 不會有事，因為 React 是以陣列本身為 key 的作用域。

React Router​

<Switch location={background || location}>
  • Switch 內的 Route 只能有一個 Route 被渲染，根據 location 的值決定渲染哪個 Route，location 本身不用額外寫 props 給 Switch，除非有以下的用法需求。
  • https://reactrouter.com/web/example/modal-gallery 範例中兩個 Route path="/img/:id" 不會同時渲染的原因是，在 Gallery 內點擊 Link 時設的 state.background 為 Gallery 路徑的 location 資料，在外層 ModalSwitch，若 state 有值則用 state.background 做為 Switch 的 location，因此就算路徑改變也因為有 state 的值改寫 location 成原本的路徑 loaction 所以原本的畫面不變，Modal 因為不在該 Switch 內而且根據 state.background 渲染，而會在原本的畫面中出現。
Last updated on