美文网首页早读让前端飞Web前端之路
JavaScript 模式之条件 前端早读课第24期

JavaScript 模式之条件 前端早读课第24期

作者: 知行社 | 来源:发表于2017-08-31 09:09 被阅读62次

    任何你写的代码,超过 6 个月不去看它,当你再看时,都像是别人写的。

    本期编辑: 小虫巨蟹九彩拼盘

    条件语句的写法

    常规写法

    if (type === 'foo' || type === 'bar') {
    }
    

    写法1:用正则

    if (/^(foo|bar)$/.test(type)) {
    }
    

    写法2:用对象

    if (({foo:1, bar:1})[type]) {
    }
    

    对于上面的3种写法。

    1. 常规写法的性能比用正则好。
    2. 在条件判断数量(数量小于5)比较少的情况下,常规写法比用对象快。条件多的情况下,用对象更快。

    具体的benchmark 见这里

    常规写法

    if (value == 0) {
      return result0;
    } else if (value == 1) {
      return result1;
    } else if (value == 2) {
      return result2;
    } else if (value == 3) {
      return result3;
    } else if (value == 4) {
      return result4;
    } else if (value == 5) {
      return result5;
    } else if (value == 6) {
      return result6;
    } else if (value == 7) {
      return result7;
    } else if (value == 8) {
      return result8;
    } else if (value == 9) {
      return result9;
    } else {
      return result10;
    }
    

    优化写法:用二分法

    if (value < 6) {
      if (value < 3) {
        if (value == 0) {
          return result0;
        } else if (value == 1) {
          return result1;
        } else {
          return result2;
        }
      } else {
        if (value == 3) {
          return result3;
        } else if (value == 4) {
          return result4;
        } else {
          return result5;
        }
      }
    } else {
      if (value < 8) {
        if (value == 6) {
          return result6;
        } else {
          return result7;
        }
      } else {
        if (value == 8) {
          return result8;
        } else if (value == 9) {
          return result9;
        } else {
          return result10;
        }
      }
    }
    

    判断值是数字的常规写法

    if (value == 0) {
      return result0;
    } else if (value == 1) {
      return result1;
    } else if (value == 2) {
      return result2;
    }
    

    优化写法: 用数组

    var results = [result0, result1, result2];
    return results[value];
    

    对于 if 内容只有一行内容的简写

    var 
          type = 'foo',
          type2 = 'bar',
          result = 0;
          
    type == 'foo' && result++;
    console.log(result); // 1
    !type == 'foo' || result++;
    console.log(result); // 2
    type == 'foo' && type2 == 'bar' && result++;
    console.log(result); //3
    type == 'foo' && type2 == 'bar' && result == 3 && (result=0)
    console.log(result); //0
    type == 'OOF' || result++; //equivalent: type != 'OOF' && result++;
    console.log(result); //1
    

    所有 JavaScript 模式:http://shichuan.github.io/javascript-patterns/

    文章推荐

    《Vue 组件间的样式污染》

    背景

    Vue 组件的组件化写法符合 web component 这种面向未来的规范,然而在样式隔离方面,它依然有一点美中不足。

    概要

    1. 污染是如何产生的?
    2. 增加 Scoped 标识
    3. ScopeId 的继承
    4. 怎么破?
    5. 这应当属于 Vue-loader 的一个 bug

    阅读地址:http://www.jianshu.com/p/b7292d01c361

    相关文章

      网友评论

        本文标题:JavaScript 模式之条件 前端早读课第24期

        本文链接:https://www.haomeiwen.com/subject/qiwfjxtx.html