[ECMAScript2016]Array.pototype.includes介绍

概述

在ES2016这个版本中，数组又引入了一个新的方法，用来判断数组中是否存在某个元素，功能类似之前的indexOf。

> ['a', 'b', 'c'].includes('a');
true
> ['a', 'b', 'c'].includes('z');
false

includes() 这个方法总是返回一个 boolean 类型的值，相当于 arr.indexOf('a') >= 0。

> ['a', 'b', 'c'].indexOf('a') >= 0 ;
true
> ['a', 'b', 'c'].indexOf('z') >= 0 ;
false

注意：includes 和 indexOf 都不能区分 +0 和 -0 ；

> ['a', NaN, +0].indexOf(-0);
2
> ['a', NaN, +0].indexOf(0);
2
> ['a', NaN, +0].includes(0);
true
> ['a', NaN, +0].includes(-0);
true

includes 和 indexOf的主要区别
includes 可以找到数组中的 NaN，而 indexOf 不行；

> ['a', NaN, 'a'].indexOf(NaN);
-1
> ['a', NaN, 'a'].includes(NaN);
true

应用

ES2016 在数组中新增的这个方法，可以运用在条件语句的判断中，比如模拟一个如下场景：

判断用户的选择中包含apple、banana、pear中任意一个，则进入条件执行相关语句；

以前我们可以这样写：

let userChoice = 'apple';

if (userChoice === 'apple' || userChoice === 'banana' || userChoice === 'pear') {
  console.log('here');
}

// OR
const satisfiedCondition = ['apple', 'banana', 'pear'];

if (satisfiedCondition.indexOf(userChoice) >= 0) {
  console.log('here');
}

现在我们可以利用这个新增的方法满足上面的场景，

let userChoice = 'pear';
const satisfiedCondition = ['apple', 'banana', 'pear'];

if (satisfiedCondition.includes(userChoice)) {
  console.log('here');
}

参考链接

http://exploringjs.com/es2016-es2017/ch_array-prototype-includes.html#_overview