何大小成

indexOf · 位运算符 · includes

检测某元素是否在数组里,据我所知有三种方法:

  1. indexOf
  2. 位运算符
  3. includes (ES7)

indexOf

Array.prototype.indexOf这个方法可能是我们用得最多的一个方法。

1
2
3
4
5
6
7
const arr = [1,2,3]
const one = arr.indexOf(1)
const four = arr.indexOf(4)
const isHasOne = one > -1
const isHasFour = four > -1
console.log(isHas) // true
console.log(isHasFour) // false

返回值得规则:指定值的第一次出现的索引; 如果没有找到 -1,所以判断是否有值即判断是否大于>-1即可。

但是,indexOf不能判断NaN!

1
['foo', 123, true, undefined, NaN].indexOf(NaN) // -1

这是以前JS规定,NaN!==NaN。但是数组里存在NaN元素,按理来说是相等的。所以就出现了后者的includes.

~(按位运算符)

有的人认为,indexOf() > -1这种方法来判断不怎么美观,那有没有更快的方法?

那就是位运算符。

按位非运算会把-1转换为0, 而在JS中,0可以被规范化为false。如果觉得返回的还是数字不直观,可以在前面加非运算符!!,转为Boolean值。

1
2
3
4
const arr = [1,2,3]
~arr.indexOf(1) // -1 => true
~arr.indexOf(4) // 0 => false
!!~arr.indexOf(1) // true

includes

ES7中引入了新的方法includes(),可以用来检测一个数组是否包含另外一个字符串。

1
[1, 2, 3].includes(1); // true

而且,还修复了判断NaN的问题

1
['foo', 123, true, undefined, NaN].includes(NaN) // true

但是,新东西还是有兼容性。这仅在Chrome, Firefox, Safari 9+ 和 Edge中被支持, IE11- 都不支持。