前端学习笔记：Javascript中indexOf()和includes()区别

在ES5中，我们经常使用数组的indexOf()方法，来检查该数组是否包含某值，如果包含则返回该元素所在下标位置，如果不包含则返回-1。如下例所示：

   var arr = [1,2,3,4,5,6]
   console.log(arr.indexOf(3)); //2
   console.log(arr.indexOf(0)); //-1

但是，indexOf方法存在两个缺点，一是语义化不强，表达不直观，而是内部使用的是全等(===)进行判断，导致NaN会造成误判。

console.log([NaN].indexOf(NaN)) // -1

在ES2016中，引入了数组的includes()方法，该方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。

   var arr = [1,2,3,4,5,6]
   console.log(arr.includes(3)); //true
   console.log(arr.includes(0)); //false

 同时，includes使用的是不同的判断算法，因此可以判断数组是否含有NaN元素

console.log([NaN].includes(NaN)) // true

在实际应用中，为了考虑对includes方法的兼容性可以布置如下操作：

const contains = (() => 
    Array.prototype.includes 
    ? (arr, value) => arr.includes(value)       //如果有该方法就执行
    : (arr, value) => arr.some(el => el === value) //如果没有采用遍历判断的方式
)()
contains(['foo','bar'], 'baz') // false