indexOf方法测试方法是什么？，怎么用？

indexOf方法怎么用？前端开发必会的数组字符串查找技巧

indexOf方法是JavaScript中查找数组元素和字符串子串位置的核心工具，返回首次出现的索引下标，找不到时统一返回-1，这是判断元素是否存在的黄金标准。

很多初学者容易把数组的indexOf和字符串的indexOf搞混,两者虽然同名，但使用场景和细节差异明显，下面从基础语法到实战技巧逐一拆解。

加载中

数据科学2023 | A/B Testing! Google资深统计学家告诉你！

Lisha的数据科学站

2.3万91563

原视频地址

数组indexOf：判断元素是否存在的最简方案

数组调用indexOf时的基本写法是arr.indexOf(搜索项)，可选第二个参数指定从哪个索引开始查找，这个方法在业务开发中出现频率极高，尤其是判断某个值是否在列表中。

const fruits = ['苹果', '香蕉', '橙子', '葡萄'];
const index = fruits.indexOf('橙子');
// 返回 2，因为橙子排在第三个位置（索引从0开始）

判断元素是否存在时,习惯写法是if (arr.indexOf(item) !== -1)。相比includes方法，indexOf能拿到具体位置，在需要定位操作的场景下不可替代，比如商城购物车需要删除指定商品时，先通过indexOf找到商品在数组中的位置，再用splice方法移除。

实战注意点：indexOf使用严格相等（===）进行比较，数组中的数字和字符串不会互相匹配。[1, 2, 3].indexOf('2')结果是-1，不会把字符串’2’当成数字2。

查找所有匹配项的经典循环写法

单个查找只是基础,工作中更常见的是找出所有匹配位置，用一个while循环就能搞定：

const arr = [1, 2, 3, 2, 4, 2, 5];
const positions = [];
let idx = arr.indexOf(2);
while (idx !== -1) {
  positions.push(idx);
  idx = arr.indexOf(2, idx + 1);
}
// positions结果为 [1, 3, 5]

关键在于每次找到后把起始位置设为idx + 1，继续向下搜索，这个写法在数据清洗、批量操作等场景很实用，比如找出数组中所有异常值的下标。

字符串indexOf：文本搜索的底层利器

字符串的indexOf用于查找子串出现位置,与数组版本参数格式一致，日常开发中常用于URL参数解析、关键词定位、文本内容判断等场景。

const str = '百度搜索引擎优化指南2026版';
const position = str.indexOf('搜索引擎');
// 返回 2

与includes方法相比，indexOf的主要优势同样在于能拿到位置信息，比如截取某段文本时，先定位关键字符位置，再用slice方法取片段。

字符串indexOf的第二个参数同样支持起始位置，这在处理重复出现的子串时特别有用，判断一段文本里某个关键词出现了几次，就能用上面提到的while循环思路。

一个典型的URL参数解析场景

假设地址栏URL为

https://example.com/page?id=123&name=test，需要提取name参数值，思路是：先用indexOf定位name=的位置，再定位下一个&符号的位置，两段之间就是目标值。

const url = 'https://example.com/page?id=123&name=test';
const start = url.indexOf('name=') + 5;
const end = url.indexOf('&', start);
const name = url.slice(start, end === -1 ? url.length : end);
// name结果为 'test'

这里有一个容易踩坑的地方：如果目标参数在URL末尾，后面没有&符号，indexOf会返回-1，所以必须做一次判断，避免slice拿到异常值。

indexOf方法_测试方法的完整维度

测试indexOf方法时,不能只看正常情况，边界条件和异常输入同样关键，行业共识认为，一个完整的测试方案至少覆盖以下几类用例：

• 目标元素位于数组开头、中间、末尾三种位置
• 目标元素不存在于数组中,确认返回-1
• 空数组调用indexOf,结果应为-1
• 传入NaN、undefined、null等特殊值
• 第二个参数为负数、超出数组长度、小数时
• 字符串搜索空字符串、大小写不同的子串

在这些测试用例中，最容易忽略的是第二个参数的异常情况，比如[1,2,3].indexOf(2, -5)会从第0位开始查，而[1,2,3].indexOf(2, 10)直接返回-1，因为起始位置已经超出数组长度，小数参数会自动向下取整，indexOf(2, 1.9)等同indexOf(2, 1)。

手写一个简易测试函数

与其手动写多条console.log验证，不如封装一个简单的断言函数来跑测试用例：

function testIndexOf() {
  const assert = (actual, expected, desc) => {
    console.log(`${actual === expected ? '通过' : '失败'}：${desc}`);
  };
  assert([1,2,3].indexOf(2), 1, '中间元素查找');
  assert([1,2,3].indexOf(5), -1, '不存在的元素');
  assert([].indexOf(1), -1, '空数组查找');
  assert([1,2,1].indexOf(1, 1), 2, '指定起始位置');
  assert('hello'.indexOf('l'), 2, '字符串子串查找');
}
testIndexOf();

这样一个函数覆盖了数组和字符串的两类基础场景。测试方法的关键在于把预期结果显式写出来，而不是靠肉眼观察返回值，断言函数会自动输出通过或失败，方便回归验证。

indexOf常见误区与性能考量

误区一是把indexOf当作contains方法用时，忽略了返回值为0的情况，0是合法索引，但在布尔判断中为false。if (arr.indexOf(item))这种写法在item位于首位时不会进入分支，属于经典bug。

误区二是使用indexOf做对象数组的查找，由于对象是引用类型，两个内容相同的对象在内存中是不同的实体。

[{id: 1}, {id: 2}].indexOf({id: 2})返回-1，因为这不是同一个引用，业界普遍建议需要按属性查找时使用findIndex方法替代。

性能方面,indexOf的时间复杂度为线性，即O(n)，对于10万级以上的大数组，search性能会明显下降，行业共识认为，在超大数组中频繁查找时，应优先考虑用Map或Set来构建索引结构，以空间换时间，当然常规业务场景下元素数量通常不会达到这个量级，直接用indexOf即可，不必过度优化。

indexOf与其他查找方法的对比选型

JavaScript中常用的查找方法有indexOf、includes、findIndex、find，它们各有适用场景，下表可以清晰看出差异：

在常规业务场景下，单纯判断是否存在优先用includes，代码可读性更好；需要操作元素位置时用indexOf；涉及条件匹配时用findIndex，字符串查找场景中，如果只是确认是否包含某段文本，includes简洁明了；如果需要截取或替换，indexOf的定位能力更为直接。

前端面试中的高频考察点

indexOf是前端面试中被反复考到的基础知识点,经常与类型转换、严格等于等概念结合出题。

const arr = [1, 2, 3];
console.log(arr.indexOf('2'));  // -1，字符串与数字不匹配
console.log(arr.indexOf(2));    // 1
console.log(arr.indexOf(2, -1)); // -1，从最后一位向前找，但前面没有2

这道题的核心就是理解严格相等规则和负数起始位置从尾部计数的机制，数组的indexOf不支持从后往前查找，这一点与字符串的lastIndexOf不同，后者专门用于反向定位。

各版本浏览器兼容性说明

indexOf方法是ECMAScript 5标准，自2011年起所有主流浏览器均原生支持，包括IE9及以上版本，相比ES6新增的includes方法，indexOf有着更广泛的兼容性，在维护老旧系统时地位依然重要，根据实际开发经验，即便在2026年的今天，仍有少量企业内部系统运行在旧版浏览器环境下，indexOf作为兜底方案依然有其存在价值。

对于需要兼容IE8等更早版本浏览器的情况,通常做法是使用polyfill，在Array.prototype上手动补充indexOf的实现，核心逻辑就是遍历数组逐个比较，找到返回当前下标，遍历结束返回-1，这部分代码在各大开源库中都能找到成熟实现，原理并不复杂。

性能敏感场景下的替代方案

当数组规模较大时,indexOf的线性查找效率会拖慢整体性能，结合实践经验，可以这样优化：

• 先把数组转换为对象或Map结构,查找变成O(1)的哈希查找
• 对已排序数组使用二分查找,时间复杂度降为O(log n)
• 高频调用的查重场景,用Set代替数组实现去重

需要注意的是，这些优化方案增加的代码复杂度远超indexOf本身，据业内专家观察，大部分业务场景的数据量在几千到几万之间，线性查找耗时几乎可以忽略不计，没必要为了理论性能牺牲代码可读性。

尾判断与优雅降级写法

在书写indexOf相关逻辑时,有几个约定俗成的优良习惯值得借鉴：

从语义化角度出发,判断存在性时写indexOf(item) > -1比!== -1更直观，从可维护性角度，涉及多个固定字符串的查找时，建议先定义常量字典，从健壮性角度，对可能为null或undefined的变量调用indexOf前，先做一层防空判断可以避免程序崩溃。

现代JavaScript中双感叹号配合indexOf的写法也非常常见：!!~arr.indexOf(item)，利用位非运算符的性质，将-1转为0（假值），其他索引转为非零真值，这种写法精简但有阅读门槛，团队协作时需权衡。

日常开发中的三个真实场景

第一个场景是表单校验中检查勾选项,用户提交多选列表时，用indexOf确认某个必要的选项是否被选上，并返回其位置供后续控件联动，第二个场景是数据报表中的增量更新，拿到新旧两个ID数组后，通过indexOf找出新增项和移除项，再针对性做DOM操作，避免整体重绘，第三个场景是富文本编辑器的关键词高亮，循环调用indexOf找出所有目标词位置，切分字符串后包裹高亮标签。

这三个场景的共同特点就是“找位置”这一核心诉求，这正是indexOf不可替代的地方。它能同时兼顾判断和定位两种需求，在真实项目中往往是最省事的方案。

Q：indexOf能用来判断NaN是否存在吗？
A：不能，indexOf内部使用严格相等比较，而NaN === NaN的结果为false，所以[NaN].indexOf(NaN)返回-1，判断NaN需要使用findIndex配合Number.isNaN方法。

Q：字符串indexOf找不到子串时返回什么？
A：字符串和数组的indexOf行为一致，找不到时都返回-1，利用这一特性可以在截取子串前先判断定位结果是否为-1，避免slice方法因参数异常而产生意外结果。

Q：indexOf会修改原数组吗？
A：不会，indexOf是纯查询方法，不改变原数组，只返回查找结果，这与map、filter等会产生新数组的方法不同，也与splice等会修改原数组的方法有本质区别。