ES8 之 Array.Prototype.includes() 会比 indexOf 更好?

阅读时长 4 分钟读完

在前端开发中,使用数组是经常遇到的事情。常常需要判断一个元素是否在数组中存在,JavaScript 提供了 Array.indexOf() 方法来实现。然而,在 ES8 中,新的 Array 原型方法 Array.includes() 被引入,它似乎比 indexOf() 更好。本文将介绍 Array.includes() 方法及其优势,并分析使用场景及应用技巧。

Array.includes() 方法

Array.includes() 方法用于判断一个元素是否在数组中,返回一个布尔值。如果存在,返回 true;反之,返回 false

Array.includes() 方法语法:

其中:

  • valueToSearch:要搜索的值
  • fromIndex:可选,从哪个索引位置开始搜索,默认是 0

示例代码:

Array.includes() 与 indexOf() 的区别

虽然 Array.includes()indexOf() 都可以用于判断一个元素是否在数组中存在,但是它们有着明显的区别。

返回值

  • Array.includes(): 返回布尔值 truefalse
  • indexOf(): 返回要搜索的值的第一个索引,如果没有找到则返回 -1。

示例代码:

处理NaN(NOT-a-Number)

Array.includes() 方法处理 NaN 的方式优于 indexOf() 方法。indexOf() 方法无法处理 NaN,而 Array.includes() 方法可以。

示例代码:

代码简洁

相比 indexOf(),使用 includes() 更加简洁,仅需要传递一个参数。

使用场景

在实际开发中,Array.includes() 更适合以下场景:

  • 判断一个元素是否在数组中存在
  • 判断数组中是否包含 NaN
  • 判断数组中是否包含布尔值

应用技巧

使用 includes() 判断元素是否存在于数组中

使用 includes() 判断数组中是否包含 NaN

使用 includes() 判断数组中是否包含布尔值

总结

比起传统的indexOf()方法,ES6中新增的Array.includes()方法可以减少Js编写的代码量,并且对于处理NaN和布尔值也更加方便。当然,在数组过长的情况下,使用Array.includes()方法,可能会对性能造成些许影响。在实际开发中,需要酌情使用。

我们一般会在引用数组中都会使用includes来做,除非你有特殊需求,不然用indexOf会在语法和性能上都稍逊一筹。

推荐大家都可以将indexOf的写法转为includes并且熟练掌握如何使用这个方法。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/645b6ef5968c7c53b0dc4376

纠错
反馈