Vue、Javascript小細節

_加陽發表於2018-08-11
VueJavaScript

上週主要寫的還是小程式，大部分優化不屬於mpVue的範疇，那就說幾點使用Vue、Javascript的優化項。

  • Javascript邏輯運算子: &&和||

    通常在if-else語句會用到邏輯運算子，判斷的大部分為布林型值，然而&&和||操作符的運算規則如下：

    expr1 && expr2
// 當expr1 為falsy時，返回expr1；當expr1為true時，返回expr2
expr1 || expr2
// 當expr1 為true時，返回expr1；當expr1為false時，返回expr2
複製程式碼

    因此，("0" && []) || 100的返回值為[]。在實際專案中，很常用這||的方式給Vue的計算屬性等設定預設值，少了很多生硬的if-else程式碼。

  • switch-case語句應用於範圍判斷

    這用到了反向思維

      switch (true) {
      case a < 10:
          // ...
          break
      case a > 10:
          // ...
          break
  }
複製程式碼

  • 不濫用Vue的計算屬性

    計算屬性特點是在能根據依賴的變數及時更新，根據定義的表示式計算值。在這個過程中，最好將重複計算的地方抽出來。

    如： 計算一組已知原圖寬高的圖片真正顯示的寬度，在幻燈片切換圖片時，得到容器的高度。可以看出，依賴的值有兩個方面的變動，圖片原圖的寬高和當前顯示的是哪張圖片。 避免重複計算，將整組圖片每一張顯示的高度算出後存在一個陣列（計算屬性imgsHeightArr）中，再在current變化時，取出陣列中[current]的值，作為另一計算屬性currentImgHeight。

  • 如何快速生成一個長度為n、元素都為0的陣列？

      let arr = new Array(n)
  Array.fill(0, 0, n)
複製程式碼

相關文章