map映射+异步加载 完美过渡 if else

·  阅读 1341

前言

代码写到一定程度,让人看着舒适十分重要。今天写业务的时候看着各种if else嵌套,内心一阵起伏。

if else的痛心

看多了if else让人头疼欲裂。贴点代码让大家感受一下痛苦吧~

function a (x, y) {
let status
if (x) {
  if (y) {
    status = func(10)
  } else {
    status = func(20)
  }
} else {
  if (y) {
    status = func(30)
  } else {
    status = func(40)
  }
}
return status
}
复制代码

随着业务的复杂度和难度,这种嵌套会变成地狱。但if else只会执行一个分支。比较与接下来的map映射还是很好的。

map映射

map映射就是键值对的读取,把分支状态信息预先缓存在Map里。最大的好处就是,非常直观

function b (x, y) {
 let map = {
   isX: {
     isY: func(10),
     not: func(20)
   },
   not: {
     isY: func(30),
     not: func(40)
   }
 }
 let firstKey = x ? 'isX' : 'not'
 let lastKey = y ? 'isY' : 'not'
 return map[firstKey][lastKey]
}
复制代码

对于复杂度、计算度较小的计算采用这种map对象没啥大问题。但随着计算量和复杂度的上升,预先缓存就会把所有的分支代码都执行了一遍,结果不言而喻。基于此的解决方案是异步加载

map映射+异步加载

异步加载可以无痛解决上面b方法中的痛处。通过计算最后只走进一个分支并执行,与if else责任链执行结果一致。

function c (x, y) {
 let map = {
   isX: {
     isY: () => func(10),
     not: () => func(20)
   },
   not: {
     isY: () => func(30),
     not: () => func(40)
   }
 }
 let firstKey = x ? 'isX' : 'not'
 let lastKey = y ? 'isY' : 'not'
 return map[firstKey][lastKey]()
}
复制代码

三种方法性能测试对比

在复杂度较小的计算中,很难看出差异。所以为了看出差距,func()如下:

function func (k) {
 for (let i = 0; i < 100000000; i++) {
   k += i
 }
 return k
}
复制代码

这样对于每个分支的执行性能都一致。方便测试。这里测试计时采用console.time('a'),适用于一些精度较小的计时。

console.time('a')
console.log('计算结果:' + a(10, 10))
console.timeEnd('a')
复制代码

这是执行时间,为了更精确一下,各执行五次取平均值:

方法 单次 单次 单次 单次 单次 平均
a(10,10) 117.945ms 119.253ms 121.727ms 119.707ms 119.263ms 119.579ms
b(10,10) 460.455ms 464.009ms 461.411ms 462.981ms 459.825ms 461.7362ms
c(10,10) 119.670ms 119.710ms 121.176ms 119.572ms 118.396ms 119.7048ms

由以上数据的平均执行时间相比较,map映射+异步加载if else的性能消耗大致相同,所以结论也就有了。而我更喜欢编程式代码风格,更青睐map映射+异步加载,如有其它更有的方法欢迎交流~

分类:
前端
标签:
分类:
前端
标签: