jQuery里如何用indexOf查找元素位置？

你刚开始学jQuery的时候，有没有遇到过这种情况：明明数据就在数组里，但死活找不到它的位置？或者想在字符串里定位某个关键词，试了好几种方法都不灵？今天咱们就来聊聊这个让新手抓狂的indexOf方法——它到底是何方神圣？怎么用才能不踩坑？

先来搞明白一个基本概念：indexOf可不是jQuery专属的方法。其实这是JavaScript自带的原生方法，在jQuery里可以直接调用。就像你家冰箱里的鸡蛋，不管是单独用还是放在三明治里，本质都是同一个鸡蛋对吧？

不过这里有个特别容易搞混的点：字符串和数组都能用indexOf，但它们的脾气可不太一样。咱们分两块来说，先说字符串场景再说数组场景，这样理解起来更清晰。

字符串搜索的场景 假设现在有个电话号码字符串：”13812345678″，你想找到”234″这个子串的位置。这时候用indexOf就跟查字典找页码一样简单：

var phone = “13812345678”; var position = phone.indexOf(“234”); // 返回3

这里返回3是因为字符串索引从0开始计算。第一个字符1是位置0，第二个3是位置1，第三个8是位置2，接下来就是234了，所以起始位置是3。是不是有点像超市储物柜的编号？

不过要注意个特殊情况：如果找不到目标内容，方法会返回-1。比如在刚才的电话号码里找”999″，那结果就是-1。这个特性经常被用来做条件判断：

if(phone.indexOf(“999”) === -1){ alert(“号码里没有可疑数字段”); }

数组元素定位的场景 现在咱们换个情况，假设有个颜色数组：[“红”,”黄”,”蓝”,”绿”]，想找”蓝”的位置。这时候的写法稍微要注意参数顺序：

var colors = [“红”,”黄”,”蓝”,”绿”]; var index = colors.indexOf(“蓝”); // 返回2

这里返回2是因为数组索引也是从0开始。重点来了：这个方法只能用于基本类型的值。要是数组里装着对象，比如[{name:”张三”}, {name:”李四”}]，这时候用indexOf找对象是找不到的，因为对象比较的是内存地址而不是内容。

这时候有同学要问了：那在jQuery项目里到底该用原生的indexOf还是jQuery自带的工具方法？这个问题问得好，咱们得掰开揉碎了说。

jQuery的.inArray()方法 jQuery其实有个亲生的方法叫$.inArray()，跟indexOf功能类似但有些细微差别。举个实际例子对比下：

var arr = [“a”, “b”, “c”];

// 原生写法 arr.indexOf(“b”); // 返回1

// jQuery写法 $.inArray(“b”, arr); // 返回1

发现区别了吗？参数顺序是反过来的！原生的indexOf是数组在前要找的元素在后，而jQuery的版本是要找的元素在前数组在后。这个细节坑过无数新手，经常导致明明元素存在却返回-1的灵异事件。

再说个重点：$.inArray()内部其实就是调用了原生的indexOf。所以本质上它们是一回事，只是包装方式不同。那为什么jQuery要多此一举呢？主要是为了兼容老版本浏览器，毕竟有些古早浏览器不支持数组的indexOf方法。

常见问题诊断 新手最容易栽跟头的几个情况，咱们列出来逐个击破：

区分大小写：indexOf是大小写敏感的 “Hello”.indexOf(“h”) // 返回-1 这时候要么统一转成小写，要么用正则表达式

严格类型匹配 var arr = [1,2,3]; arr.indexOf(“1”); // 返回-1 数字1和字符串”1″会被认为是不同的

对象数组无效 var users = [{id:1}, {id:2}]; users.indexOf({id:1}); // 返回-1 这时候需要改用findIndex或者循环遍历

性能优化小技巧 虽然indexOf用起来方便，但在大数据量时要注意效率。比如在循环里反复调用indexOf查找，时间复杂度会变成O(n²)。这时候更好的做法是：

举个实际案例：有个包含10万个城市名的数组，要频繁查找某个城市是否存在。如果每次都用indexOf，页面可能会卡顿。这时候可以预先处理成哈希对象：

var cityMap = {}; cities.forEach(function(city, index){ cityMap[city] = index; });

// 后续查找直接取属性值 var position = cityMap[“北京”] || -1;

浏览器兼容性提醒 虽然现代浏览器都支持indexOf，但如果你要兼容IE8及以下版本，就需要垫片(polyfill)了。jQuery的$.inArray()就是为此存在的，所以在老项目中看到这个写法别觉得奇怪。

小编这些年用下来有个体会：能用原生方法尽量用原生。现在主流的框架像Vue、React都不依赖jQuery了，掌握好原生JavaScript的方法才是硬道理。当然在维护老项目时，理解jQuery的写法也很重要。最后留个思考题：如果要反向查找元素位置（从后往前找），应该用什么方法？没错，就是lastIndexOf，用法和indexOf如出一辙，但查找方向相反。下次遇到需要倒序查找的需求，记得试试这个兄弟方法。