前言

  前面碰到一个需求:想要判断一个数是否在某个数组中,然后决定返回值
  详见:一块学Vue:学习日记_2020.1.9 - 利用Vue实现冒泡排序的过程展示器_第二次优化https://editor.csdn.net/md/?articleId=103883460
  一开始想的方法是:

this.state == 5 || this.state == 9 || this.state == 0 ? true : false;

  但是感觉需要判断的数多了之后,写起来很麻烦,就想了第二种方法:

[5, 9, 0].indexOf(this.state) != -1 ? true : false;

  但是不知道indexOf的性能如何,所以没有改用第二种方法。
  所以本文就想要来测试一下他们具体的性能差异如何。同时,加入也能实现这种功能的Array.includes()和for-of。

测试说明

  找值的数组为[ 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ]。
  因为每次计算所需的时间都很短,所以用while循环来重复计算,放大所需时间。
  为了保证结果的可靠性,我们统计一万次所需时间,取平均值。
  includes – Array.includes()
  indexOf – Array.indexOf()
  for-of – for循环
  logical – 逻辑运算符
  看了includes和indexOf的源代码,发现默认情况下,这两种方法的遍历方法是从数组头部一直找到尾部。所以下面for循环和逻辑运算符的计算方法也是从数组头部遍历到尾部。

测试结果

结果先说,具体实现代码放最后。
  下面的计时并不等于这几种写法本身的耗时,还要算上while语句判定以及计数器累加的耗时。

1.重复计算次数为1000000次(百万)

在这里插入图片描述

2.重复计算次数为100000次(十万)

在这里插入图片描述

3.重复计算次数为10000次(万)

在这里插入图片描述

6.重复计算次数为1000次(千)

在这里插入图片描述

5.重复计算次数为100次(百)

在这里插入图片描述

具体实现代码

  用Vue写一个测试网页。

  HTML部分
在这里插入图片描述
  JS部分
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

  在低计算量级的情况下,因为花费的时长都很小,为了方便管理和维护,还是可以用一下这种写法的:

[5, 9, 0].indexOf(this.state) != -1 ? true : false;

  当然更推荐ES7发布的includes,语义化更明确,而且能处理indexOf中处理不了的NaN数据:

[5, 9, 0].includes(this.state) != -1 ? true : false;

  如果到了高计算量级,这种写法与直接用逻辑运算符在性能的差异就会显得很夸张了。


优化

  发现几个方法里面有很多代码是重复的,我们可以把这部分测试内容相关的代码提取出来作为一种方法,方便复用和维护。

  Vue的v-model可以添加三种修饰词:lazy、number、trim。分别用来把同步的触发事件从input换成change、将输入值通过parseFloat()转换成数字类型、去除输入内容首尾空格。

  前面其实做过类似number修饰词的操作:
在这里插入图片描述
  用利用v-model的修饰词对代码进行优化,会让测试相关代码更为纯粹,毕竟上面这两句代码其实跟我们的测试在逻辑上是没有任何关系的。

提取方法

在这里插入图片描述
在这里插入图片描述

使用修饰词

在这里插入图片描述
在这里插入图片描述
  因为我们的功能上没有要求,在这里lazy修饰词其实加不加都是没差的。

Logo

前往低代码交流专区

更多推荐