一块学Vue:学习日记 - includes、indexOf、for循环、逻辑运算符 - 比较这四种方法在确认一个数是否存在于数组中时的表现

前言

  前面碰到一个需求：想要判断一个数是否在某个数组中，然后决定返回值
  详见：一块学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修饰词其实加不加都是没差的。