Vue、Javascript小细节

上周主要写的还是小程序，大部分优化不属于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)