JavaScript indexOf 方法详解：基础用法、对象查找陷阱与替代方案
本文详解JavaScript中indexOf方法的正确用法。涵盖字符串与数组的基础查找，重点解析对象和数组作为元素时的引用比较陷阱。针对JSON.stringify()方法的局限性，提供了基于递归和字段逐一比较的自定义查找方案，并补充了indexOf与lastIndexOf的区别及具体示例。
JavaScript indexOf 的正确用法示例详解
在 JavaScript 中，indexOf 方法扮演着重要角色。它主要用于判断某个元素是否存在于数组中，或者某个字符是否存在于字符串里。如果找到匹配项，该方法返回该元素或字符首次出现的索引位置；若未找到，则返回 -1。
例如
var arr = [1, 2, 3];
console.log(arr.indexOf(2)); //打印结果为1又或者
var str = "helloworld";
console.log(str.indexOf("w")); //打印结果为5当需要删除数组中的特定元素时，常见的做法是先使用 indexOf 获取索引，再结合 splice 方法进行操作。
var arr = [1, 2, 3];
var idx = arr.indexOf(2);
arr.splice(idx,1);
console.log(arr);然而，indexOf 是否在所有情况下都适用？请看下面的代码示例。
var arr = [{name:"racyily",age:22},{name:"susan",age:18}];
var obj = {name:"susan",age:18};
console.log(arr.indexOf(obj)); //打印结果为-1我们发现，尽管 obj 和 arr 数组中的第一个元素内容看似相同，但 indexOf 却返回了 -1。
再尝试以下代码
var arr = [{name:"racyily",age:22},{name:"susan",age:18}];
var arr2 = arr[1];
console.log(arr.indexOf(arr2)); //打印结果为1至此可以明确，当数组中存储的是对象或数组时，indexOf 只能识别引用相同的对象，从而返回正确的索引值。
那么，如果希望判断一个对象（或数组）在另一个数组中是否存在（即值相等而非引用相同），该如何实现？
这种情况下，只能编写自定义方法来实现。
起初，我是这样编写的：
var myIndexOf = function(arr,el){
for(var i=0;i<arr.length;i++){
if(JSON.stringify(arr[i]) == JSON.stringify(el)){
return i;
}
}
return -1;
}上述代码的原理是将数组中的元素和传入的对象通过 JSON.stringify() 转换为字符串，然后比较两个字符串是否相等。
这个方法看似实现了功能，但其中隐藏着一个深坑。
因为一旦对象中的字段顺序发生颠倒，就无法匹配成功，导致返回 -1（我曾因此深受其害）。
那么究竟如何规避此类问题？从原理上讲，需要逐个比较对象中的每个元素是否完全相等。
参考以下代码实现
//查找一个对象(数组)是否存在于一个数组中
function myIndexOf(arr, el) {
var result = false;
if (arr instanceof Array && el instanceof Object) {
for (var i in arr) {
if(checkLen(arr[i],el)){
result = recursiveFunc(arr[i], el);
}
if (result) {
return i;
}
}
return -1;
}
return -1;
}//递归调用比较对象每个字段
var recursiveFunc = function (arr, o) {
var result = false;
if (o instanceof Object) {
if (!(arr instanceof Object)) {
return false;
}
for (var p in arr) {
if(checkLen(arr[p],o[p])){
result = recursiveFunc(arr[p], o[p]);
if (!result) {
return false;
}
}
}
return true;
}
else {
if (arr == o) {
return true;
}
return false;
}
}//判断两个对象长度是否相同。
var checkLen = function (o1, o2) {
var count1 = 0,
count2 = 0;
if(o1 instanceof Object && o2 instanceof Object){
for(var i in o1){
count1++;
}
for(var p in o2){
count2++;
}
}
return count1==count2;
}补充：JavaScript 中 indexOf() 的使用规范
语法： String.IndexOf(Char, [startIndex], [count])：
定义 ----返回指定字符在原字符串中的第一个匹配项的索引。如省略第二个参数，则将从字符串的首字符开始检索。 -----可指定字符开始检索位置和指定长度的字符，若没有找到该字符，则返回 -1。 -----也可以判断数组中是否包含某个值。
用法及实例
示例1：查找字符串中某一字符从头开始第一次出现的索引
var str = "Hello world!"
console.log(str.indexOf("o")) //4
console.log(str.indexOf("Hello")) //0
console.log(str.indexOf("World")) //-1
console.log(str.indexOf("world")) //6需要注意的是，当匹配到一个字符串时，会返回字符串中第一个字符的索引，如上例匹配 word 时，返回的是6。
示例2：查找字符串中某一字符从指定位置开始第一次出现的索引
var str = "Hello world! wo shi ooo"
console.log(str.indexOf("o",8)) //14有 indexOf，也就有 lastIndexOf，它和 indexOf 相反，是匹配字符串最后一次出现的索引 var str = “Hello world! wo shi oll” onsole.log(str.indexOf(“o”)) //4 console.log(str.lastIndexOf(“o”)) //20`
示例3：判断字符串中是否包含某个字符的情景中：
var str = "Hello world! wo shi oll"
console.log(str.indexOf("World") == -1) //true
console.log(str.indexOf("world") == -1) //false示例4：判断数组中是否包含某个元素
const arr = [1,5,3,8,22]
console.log(arr.indexOf(2))//不存在，返回-1
console.log(arr.indexOf(8))//存在，返回索引3到此这篇关于 js indexOf 的正确用法的文章就介绍到这了,更多相关js indexOf 用法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28