要判断数组是否包含某个元素大家通常会用到 indexOf() 方法，然而 ES6 新出了一个 includes() 用来替代 indexOf()，那么这俩之间究竟有什么差别呢？今天我们就来详细讲一下。

在此之前先说一下两者的相同点，他们都可以作用于数组和字符串，而且语法都一样

arr.includes(searchElement, fromIndex)
arr.indexOf(searchValue[, fromIndex])

不过 indexOf 是返回匹配的索引，而 includes 直接返回是否匹配到的布尔值。

NaN

我们来看这样一个例子

[NaN].indexOf(NaN)

理论上应该是返回 0 的，但结果却返回了 -1，所以 indexOf 是没办法判断是否包含 NaN 的。而换成 includes 则没问题

[NaN].includes(NaN)
// true

类数组对象

前面我们讲过类数组对象

let mans = {
  0: 'tom',
  1: 'lucy',
  length: 2
}

如果我要判断这个类数组对象是否包含某个元素，要用 indexOf 的话得先将其转成数组

Array.from(mans).indexOf('tom') > -1
// true

而用 includes 则可以这样做

[].includes.call(mans, 'tom')
// true

这是因为，includes 有意被设计为通用方法，不光可以用在数组上，还可以用在其它对象（比如类数组对象）上。

所以用在 arguments 上也是没问题的

function sayHello (name) {
  let hasTom = [].includes.call(arguments, 'tom')
  console.log(hasTom)
}

sayHello('tom')
// true

总结

除了上面的两点区别，从代码语义化层面来讲，includes 是更好的选择，别人看到你用 includes 必然就知道你是在判断是否包含的意思。

目前除了 IE（非Edge）其他浏览器基本都支持 includes，所以如果没有兼容考虑的话，可以开始在自己的项目中将 indexOf 换成 includes 了。