為什麼大家都在做 TodoList？

因為 Todolist 包含完整的 CRUD 行為，又功能需求不複雜，很適合當作小專案來練習。

最近六角學院的公開活動 Vue3 夏令營，還有自己練習 JavaScript 的關係，用不同的寫法實作 Todolist 後，總結出上述的心得。

在這裡記錄一下寫法上的差異。

定義

變數是用來儲存值的一個容器。

舉個例子，用 JavaScript 來表示蘋果價格為 25 元

變數的作用域（Scope）

作用域是指變數的有效範圍。

常聽到的全域變數（global variable）通常是指：全域變數是不在任何function(){}內的變數，換句話說，全域變數是在任何地方都可以用的變數。

跟全域變數相反，function(){}內的變數稱為區域變數（local variable）。

變數的提升（Hoisting）

在其他程式語言裡面，程式碼是逐步執行的，所以「把要做的事情放在宣告之前」，就會出錯。

但在 JavaScript 並不會出錯，因為執行程式碼之前，會先把宣告的函式或變數放到記憶體中，直到程式執行的時候，函式或變數就已經存在了。（感覺像是宣告的東西被提升到要做的事情之前，但實際不是）

要做的事情放在宣告之前，仍然可以繼續執行的現象叫做提升（Hoisting）。

要讓height可以有效果，height的設定必須是絕對單位（px, rem…）。例如：

1
2
3

div {
  height: 300px;
}

Flexbox 是什麼？

早期用 Box model 排版的時候，要用很多種方式來避免畫面跑版，但隨著時代進步，不同的裝置有不同的解析度，若每個裝置都要重新設計版面也太麻煩了！於是 Flexbox 就誕生啦！

Flexbox 解決了早期的排版問題，能夠隨著不同裝置來變化排版，可以自適應不同裝置的長寬稱為響應式布局（RWD）。

網路上有很多解釋 Flexbox 的文章，這裡主要說明 Flexbox 相關的屬性及用法。

先講結論：||、 && 可以幫助程式碼變得更短。

• 用 ||、 && 來改寫if
• 用 || 來設定變數的預設值
• 用 && 來檢查物件屬性是否存在

介紹一些開發時好用的方法，別再只會用console.log了

針對陣列中的每個元素，執行callback，回傳一個符合條件的元素的值，否則回傳undefined

針對陣列中的每個元素，執行callback，回傳一個符合條件的元素的索引值，否則回傳-1