## 1.
* a. 因為變數 i 是使用 var ，scope 在全域下，在 setTimeout 執行到時，變數已經加到 5了。
* b. setTimeout 沒有 delay 的功能，在迴圈執行時，會把所有 setTimeout的 callback 放入 event loop 的機制下，因為所有 callaback 都是 1000ms，故會在1000ms 後一次顯示。
* c. 使用 Promise 的功能即可簡單達到功能。

async function func() {
  for (let i = 0; i < 5; i++) { 
    await new  Promise((resolve) => {
      setTimeout(() => {
        console.log(i);
        resolve()
      }, 1000)
    })
  }

}

func()

## 2.
* a.
ans: false
* b.
ans: true

## 3.

a. 不一定，因為經過 event loop 的機制下，可能會受到其他 callback 阻塞的影響，setTimeout 並不是監聽時間執行 callback 的方式。

## 4

 function random6(n) {
  if (n < 6) {
    return null
  }
  const results = []
  const map = {}

  function pickNum() {
    return 1 + Math.floor(Math.random() * n)
  }

  while ( results.length < 6) {
    const num = pickNum()

    if (!map[num]) {
      map[num] = 1
      results.push(num)
    }
  }

  return results
}

## 5

在 React map 的情況使用 key 是為了減少不必要的 Render，在 key 相同時重複的組件會盡可能不做 ReRender，而 index 有可能因為陣列數量的更動產生可能可以減少的浪費，像是使用 id 的話，一般就能確定資料是同一份。

## 6

1. 原生方式 React Context，不過Context 比較適合依賴注入，不適合大量 State 更動。
2. Redux，React 生態下狀態管理工具，一般的使用上比較不會如 Context 一般造成太多 Side Effect。
3. 其他狀態管理工具，可能如 Mobx，有些 Observable 的方式也有共享狀態，但不會造成太多ReRender 的方案。

## 7

1. CDN
2. 減少初始內容前端渲染的需求(SSR or LazyLoad)
3. 確認圖片是否壓縮
4. 確認是否有不必要的 DOM 變動、擠壓，產生 reflow repaint