在前端开发中,使用数组是经常遇到的事情。常常需要判断一个元素是否在数组中存在,JavaScript 提供了 Array.indexOf()
方法来实现。然而,在 ES8 中,新的 Array 原型方法 Array.includes()
被引入,它似乎比 indexOf()
更好。本文将介绍 Array.includes()
方法及其优势,并分析使用场景及应用技巧。
Array.includes() 方法
Array.includes()
方法用于判断一个元素是否在数组中,返回一个布尔值。如果存在,返回 true
;反之,返回 false
。
Array.includes()
方法语法:
array.includes(valueToSearch[, fromIndex])
其中:
valueToSearch
:要搜索的值fromIndex
:可选,从哪个索引位置开始搜索,默认是 0
示例代码:
const arr = [1, 2, 3, 4, 5]; console.log(arr.includes(3)); // 输出 true console.log(arr.includes(6)); // 输出 false console.log(arr.includes(4, 3)); // 输出 false,从第 3 个索引位置开始查找
Array.includes() 与 indexOf() 的区别
虽然 Array.includes()
和 indexOf()
都可以用于判断一个元素是否在数组中存在,但是它们有着明显的区别。
返回值
Array.includes()
: 返回布尔值true
或false
indexOf()
: 返回要搜索的值的第一个索引,如果没有找到则返回 -1。
示例代码:
const arr = [1, 2, 3, 4, 2, 5]; console.log(arr.includes(2)); // 输出 true console.log(arr.indexOf(2)); // 输出 1 console.log(arr.includes(6)); // 输出 false console.log(arr.indexOf(6)); // 输出 -1
处理NaN(NOT-a-Number)
Array.includes()
方法处理 NaN 的方式优于 indexOf()
方法。indexOf()
方法无法处理 NaN,而 Array.includes()
方法可以。
示例代码:
const arr = [1, 2, NaN]; console.log(arr.includes(NaN)); // 输出 true console.log(arr.indexOf(NaN)); // 输出 -1
代码简洁
相比 indexOf(),使用 includes() 更加简洁,仅需要传递一个参数。
使用场景
在实际开发中,Array.includes()
更适合以下场景:
- 判断一个元素是否在数组中存在
- 判断数组中是否包含 NaN
- 判断数组中是否包含布尔值
应用技巧
使用 includes() 判断元素是否存在于数组中
if (arr.includes(value)) { // 元素存在于数组中 } else { // 元素不存在于数组中 }
使用 includes() 判断数组中是否包含 NaN
if (arr.includes(NaN)) { // 数组中包含 NaN } else { // 数组中不包含 NaN }
使用 includes() 判断数组中是否包含布尔值
if (arr.includes(true)) { // 数组中包含 true } else { // 数组中不包含 true }
总结
比起传统的indexOf()
方法,ES6中新增的Array.includes()
方法可以减少Js编写的代码量,并且对于处理NaN和布尔值也更加方便。当然,在数组过长的情况下,使用Array.includes()
方法,可能会对性能造成些许影响。在实际开发中,需要酌情使用。
我们一般会在引用数组中都会使用includes来做,除非你有特殊需求,不然用indexOf会在语法和性能上都稍逊一筹。
推荐大家都可以将indexOf的写法转为includes并且熟练掌握如何使用这个方法。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/645b6ef5968c7c53b0dc4376