利用 ES7 的 Array.prototype.includes 方法实现数组查找

阅读时长 3 分钟读完

利用 ES7 的 Array.prototype.includes 方法实现数组查找

什么是 Array.prototype.includes 方法?

Array.prototype.includes 方法是 ES7 中新增的一种方法,它可以判断一个数组是否包含一个特定的值,并返回布尔值。该方法接受两个参数,第一个参数表示要查找的值,第二个参数表示从哪个位置开始查找(可选参数,不传将从数组第一个位置开始查找)。如果数组中存在该值,则返回 true,否则返回 false。

下面是使用 includes 方法的示例代码:

Array.prototype.includes 方法的好处

在以前的版本中,我们通常使用 Array.prototype.indexOf 方法来查找数组中是否包含特定的值。但是,该方法有以下几个缺点:

  • indexOf 方法返回的索引值可能会误导我们判断是否存在该值,因为该方法返回的是第一次出现该值的位置,如果该值存在多次,我们可能需要写更多的代码来确定该值是否存在。
  • indexOf 方法不能正确地比较 NaN。例如,[NaN].indexOf(NaN) 返回 -1,而不是 0,这可能会导致混淆。

相比之下,Array.prototype.includes 方法的用途更清晰,其语义也更易于理解。它会返回一个简单的布尔值,让我们能够更轻松地确定数组中是否存在该值。

实现数组查找

假设我们有一个包含一些用户名字的数组:

现在,我们需要使用 includes 方法来查找用户输入的名字是否存在于该数组中,如果存在,则返回该用户名的索引位置,如果不存在,则返回 -1。

-- -------------------- ---- -------
-------- ------------------- -
  ----- ----- - -------------------- -- --- ------- ------
  -- ------ --- --- -
    ------ ------
  -
  ------------------------ - -- --------- -------- ----
    ------ ---------------------- -- ---- --- ------
  -
  ------ ---
-

上述函数中,我们首先使用 indexOf 方法来查找该用户名是否存在于数组中,如果存在,则直接返回该用户名的索引位置。如果不存在,则使用 includes 方法来确认该用户名是否存在于数组中,如果存在,则使用 findIndex 方法来查找该用户名的索引位置。

总结

在本文中,我们介绍了 ES7 中新增的 Array.prototype.includes 方法的用法和好处,并提供了使用该方法进行数组查找的示例代码。与早期的 indexOf 方法相比,includes 方法更简单、更易于使用,能够更好地判断数组是否包含特定的值。在编写前端代码时,我们需要了解常见的数组操作方法,以提高编写效率和代码质量。

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

纠错
反馈