ES6 数组的includes和find、findindex

ES6 数组的includes和find、findindex

ES5的indexOf

在ES5，Array已经提供了 indexOf用来查找某个元素的位置，如果不存在就返回-1，但是这个函数在判断数组是否包含某个元素时有两个小不足，
1、它会返回-1和元素的位置来表示是否包含，在定位方面是没问题，就是不够语义化。
2、不能判断是否有NaN的元素,它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', NaN]
console.log('%s', arr1.indexOf(NaN))// 结果-1

ES6中includes（）

ES6提供了Array.includes()函数判断是否包含某一元素，除了不能定位外，解决了indexOf的上述的两个问题。它直接返回true或者false表示是否包含元素，对NaN一样能有有效。

const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', NaN]
console.log('%s', arr1.includes('c'))// true
console.log('%s', arr1.includes('z'))// false
console.log('%s', arr1.includes(NaN))// true

includes()函数的第二个参数表示判断的起始位置

第二个参数也可以是负数，表示从右数过来第几个，但是不改变判断搜索的方向，搜索方向还是从左到右.，如果这时它大于数组长度，则会重置为从0开始。

const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', NaN]
console.log('%s', arr1.includes('d', 1)) // true
console.log('%s', arr1.includes('d', 3))// true
console.log('%s', arr1.includes('d', 4))// false

console.log('%s', arr1.includes('k', -1))// false
console.log('%s', arr1.includes('k', -2))// true
console.log('%s', arr1.includes('i', -3))// false

includes()和Map和Set的has方法的区别

• Map
  结构的has方法，是用来查找键名的，比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target,
  propertyKey)。
• Set
  结构的has方法，是用来查找值的，比如Set.prototype.has(value)、WeakSet.prototype.has(value)。

数组的 find() 和 findIndex() 方法

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1, 4, -5, 10].find((n) => n < 0) // -5
[1, 5, 10, 15].find(function(value, index, arr) {
 return value > 9;
}) // 10

上面代码中，find方法的回调函数可以接受三个参数。
value: 当前的值
index:当前的位置
arr:原数组

findIndex方法

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
 return value > 9;
}) // 2

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

function f(v){
 return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

另外，这两个方法都可以发现NaN，弥补了数组的indexOf方法的不足。

[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0

上面代码中，indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到。

例子：判断被选中的医生是否在已选医生行列

两个表格已选中医生和参与医生，要求判断当前选中医生是否在这两个表中。

const reArr = this.cardList.findIndex((item) => item.docCode === this.docSelect.docCode );
const reChoose = this.chooseDoc.findIndex((item) => item.docCode === this.docSelect.docCode );
     if (reArr === -1 && reChoose === -1) {
      this.isDocterVisible = true; // 如果不在两个表中则展示新增弹框
     } else {
       this.msg.warning('该医生已经在列表中');
       return;
     }