ES10 中新增的 Array.prototype.indexOf 方法用法详解

阅读时长 4 分钟读完

概述

在 ES10 中,JavaScript 新增了一个非常实用的数组查找方法 Array.prototype.indexOf()。这个方法的语法非常简单,可以用来查找数组中是否包含某个特定的元素并返回匹配的第一个索引值。它能够快速简单地替代常规的循环查找方式,是提高数组查找效率的好帮手。

在本篇文章中,我们将详细介绍 indexOf() 方法的用法,包括参数、返回值、示例代码等,希望能够为前端开发者提供一些帮助和指导。

语法

Array.prototype.indexOf(searchElement[, fromIndex])

其中 searchElement 表示要查找的元素,fromIndex 可选,表示从数组中的哪个位置开始查找,默认为 0。

该方法返回匹配的第一个索引值,如果找不到则返回 -1。

使用方法

基本用法

基本用法非常简单,只要将要查找的元素作为参数传递给 indexOf() 方法即可。

上面的示例里,我们定义了一个包含 1-5 的整型数组,然后传递了数字 3 给 indexOf() 方法,作为要查找的元素。这个方法会返回匹配的第一个索引值,即位置 2。

搜索起点

当数组中存在多个相同的元素时,indexOf() 方法默认返回第一个匹配的元素的索引值。如果你想从其它位置开始查找,可以通过传递第二个参数来指定搜索的起点。

上面的示例里我们定义了一个包含两个 3 的数组,然后传递了两个参数给 indexOf() 方法。第一个参数是要查找的元素 3,第二个参数是从索引位置 3 开始查找。这个方法会返回从第三个位置开始匹配的第一个索引值,即位置 5。

需要注意的是,如果指定的搜索起点大于等于数组的长度,那么将始终返回 -1。

与 includes() 方法比较

在 ES6 中,JavaScript 又新增了一个数组查找方法 includes(),与 indexOf() 方法类似。includes() 方法也可以用来判断数组中是否包含某个特定的元素,它的语法如下:

indexOf() 方法不同的是,includes() 方法返回的是 true 或 false,而不是索引值。此外,includes() 方法不支持指定搜索起点,只能从头开始查找。

这里我们来对比一下 indexOf() 方法和 includes() 方法的区别:

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

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

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

输出结果:indexOf() 方法在查找 NaN 的时候返回了正确的索引值 5,而 includes() 方法则返回了 true。由此可以看出,二者在判断数组是否包含 NaN 等特殊值的时候行为是有差异的。

总结

indexOf() 方法是一个非常实用的数组查找方法,在开发中可以提高数组查找的效率。通过本文的介绍,相信你已经掌握了它的语法和基本使用方法,并且能够将它应用到实际开发中去。注意,在使用 indexOf() 方法时需要注意搜索起点的指定和特殊值的处理,以免出现错误结果。

希望这篇文章能够对你有所帮助,同时也欢迎大家探讨、补充和分享更多的前端技术知识。

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

纠错
反馈