转载

在 ES6/7 中比`Array.prototype.indexOf`更甜的几个 API

先说遇到的问题：

有这样的数组: [{id: 0}, {id: 1}, {id: 2}, {id: 3}, ...] ，我需要找出 {id: 0} ，想想 ES5 中似乎只有一个查找的方法 indexOf （哦， lastIndexOf 从尾巴找），但是因为对象是引用类型，所以 {id: 0} === {id: 0} 返回的是 false ，因此 [{id: 0}, {id: 1}, {id: 2}, {id: 3}, ...].indexOf({id: 0}) 是 -1 。

那怎么办，似乎可以用 forEach 了

let index let item [{id: 0}, {id: 1}, {id: 2}, {id: 3}].forEach((v, i) => {   if (i.id === 0) {     item = v     index = i   } })

但是这样还是很奇怪，对不对，原因就是 forEach 的语义化不够好。

幸运的是，在 ES6 中，数组的新拓展可以解决这类问题：

数组实例的find()和findIndex()

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

[1, 4, -5, 10].find((n) => n < 0) // -5

上面代码找出数组中第一个小于0的成员。

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

上面代码中， find 方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

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

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

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

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

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

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

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

除此以外在 ES7 中也有一个新方法，可以代替 indexOf ： includes()

Array.prototype.includes 方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的 includes 方法类似。该方法属于 ES7 ，但 Babel 转码器已经支持。

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

该方法的第二个参数表示搜索的起始位置，默认为 0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为 -4，但数组长度为 3），则会重置为从 0 开始。

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

没有该方法之前，我们通常使用数组的 indexOf 方法，检查是否包含某个值。

if (arr.indexOf(el) !== -1) {   // ... }

indexOf 方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于 -1，表达起来不够直观。二是，它内部使用严格相当运算符（ === ）进行判断，这会导致对 NaN 的误判。

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

includes 使用的是不一样的判断算法，就没有这个问题。

[NaN].includes(NaN) // true

下面代码用来检查当前环境是否支持该方法，如果不支持，部署一个简易的替代版本。

const contains = (() =>   Array.prototype.includes     ? (arr, value) => arr.includes(value)     : (arr, value) => arr.some(el => el === value) )(); contains(["foo", "bar"], "baz"); // => false