在前端开发中,判断一个数组是否包含指定的值是非常常见的操作,通常会使用 indexOf 或 includes 方法来实现,其中,indexOf 方法返回查找到的元素在数组中的下标,如果没找到则返回 -1,而 includes 方法返回一个布尔值,表示数组中是否包含该元素。
在 ES7 中新增了 Array.prototype.includes 方法,可以方便地判断一个数组是否包含指定的值,而且代码也更加优雅。
方法介绍
Array.prototype.includes 方法用于判断一个数组是否包含一个指定的值。其语法如下:
array.includes(valueToFind[, fromIndex])
其中,valueToFind 表示要查找的值,fromIndex 表示从数组中的哪个索引开始查找(可选参数),如果省略则默认从第一个元素开始查找。该方法返回一个布尔值,表示数组中是否包含该元素。
示例代码
下面是一个基本的使用示例,判断一个数组是否包含指定的值:
const arr = [1, 2, 3, 4, 5]; const hasThree = arr.includes(3); console.log(hasThree); // true
从上面的例子可以看出,通过 includes 方法可以非常简单地判断一个数组是否包含指定的值。
接下来我们再看一个例子,判断一个数组中是否存在指定的对象:
const arr = [ { id: 1, name: 'Tom' }, { id: 2, name: 'Jerry' }, { id: 3, name: 'Spike' } ]; const hasJerry = arr.includes({ id: 2, name: 'Jerry' }); console.log(hasJerry); // false
结果发现不符合预期,includes 方法返回了 false。这是为什么呢?
原因在于 includes 方法比较两个值是否相同时,使用的是 Object.is 方法进行比较,而不是使用全等运算符(===)。而 Object.is 方法比较的是两个值是否相同,而不是两个对象是否相等。
因此,上面的例子中,虽然我们提供的值和数组中的对象看起来相同,但它们实际上是不同的对象,Object.is 方法返回的结果就是 false。如果要比较对象是否相等,可以使用 lodash 库的 isEqual 方法或自己实现一个比较函数。
下面是一个利用 isEqual 方法实现的例子,判断一个数组中是否存在指定的对象:
-- -------------------- ---- ------- ----- - - ------------------ ----- --- - - - --- -- ----- ----- -- - --- -- ----- ------- -- - --- -- ----- ------- - -- ----- ----- - - --- -- ----- ------- -- ----- -------- - ------------ -- -------------- -------- ---------------------- -- ----
总结
Array.prototype.includes 方法可以方便地判断一个数组是否包含指定的值,它的使用也非常简单,比 indexOf 或 includes 方法更加优雅和语义化。需要注意的是,该方法比较值的方式和全等运算符有一些差异,需要注意使用。在实际开发中,我们可以选择自己实现一个比较函数或使用 lodash 库的 isEqual 方法来比较两个对象是否相等。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64d0ce0ab5eee0b5257d0270