JavaScript中indexOf方法的类型转换陷阱与严格相等原理

前言

前言

提到 indexOf，许多开发者并不陌生，它在判断字符串是否包含子串时极为常用，尤其对于正则表达式掌握不够熟练的开发者而言，它是不可或缺的工具。本文结合近期遇到的实际问题，通过具体实例进一步探讨 indexOf 方法的使用。本文旨在积累小知识点，并非深入的理论探讨，因此省略了对 indexOf 第二个参数的解释，相信读者已了解其作用。

String 类型的使用

String 类型的使用

回顾一下大家熟悉的字符串用法，举例如下：

let str = 'orange';

str.indexOf('o'); //0
str.indexOf('n'); //3
str.indexOf('c'); //-1

上述代码中，0 和 3 分别代表字符 'o' 和 'n' 在字符串中的索引位置，起始索引为 0。若返回 -1，则表示未找到匹配项。

曾有人疑惑为何返回的是 -1 而不是 null 或 undefined。这属于语言规范制定者的设计决策，无需过度纠结。

看到这里，读者可能觉得内容平淡无奇，别急，继续看下一个例子。

let numStr = '2016';

numStr.indexOf('2'); //0
numStr.indexOf(2); //0

这里有一个关键点：indexOf 会执行简单的类型转换，将数字隐式转换为字符串 '2' 后再执行匹配操作。

Number 类型的使用

Number 类型的使用

读者可能会想，number 类型是否也有 indexOf 方法，因为存在隐式转换机制？明确告知：没有。请看示例：

let num = 2016;

num.indexOf(2); //Uncaught TypeError: num.indexOf is not a function

如果非要在 number 类型上使用 indexOf 方法，可以将其转换为字符串。继续以上例为基础：

//二逼青年的写法
num = '2016';
num.indexOf(2); //0

//普通青年的写法
num.toString().indexOf(2); //0

//文艺青年的写法
('' + num).indexOf(2); //0

第一种写法简单直接，对于已知且较短的数字处理尚可接受。但当 num 变量针对不同数据动态变化时，该如何处理？❌

第二种写法最为常用，但相比第三种写法略显冗长。实际上两者皆可，代码洁癖者通常偏好第三种写法 ✅

Array 类型的使用

Array 类型的使用

请大家打起精神，真正的挑战来了。

数组方法大家再熟悉不过，却往往忽略了数组也拥有 indexOf 方法（个人感觉常被忽视）。

空谈无益，关键在于遇到了什么问题，以及需要注意哪些⚠️点？

let arr = ['orange', '2016', '2016'];

arr.indexOf('orange'); //0
arr.indexOf('o'); //-1

arr.indexOf('2016'); //1
arr.indexOf(2016); //-1

此处未将例子拆分得过于细致，四个用例足以说明问题。

arr.indexOf(‘orange') 输出 0，因为 'orange' 是数组的第 0 个元素，匹配成功并返回其下标。

arr.indexOf(‘o') 输出 -1，因为该方法不会在每个元素内部再次执行 indexOf 匹配。

arr.indexOf(‘2016') 输出 1，因为该方法从头开始匹配，直到找到第一个匹配项即返回该数组元素的下标，而非返回所有匹配的下标。

arr.indexOf(2016) 输出 -1，请注意：此处不会进行隐式类型转换。

既然发现了这个坑，不妨刨根问底。查阅 MDN 官网可知详情。对此话题感兴趣的朋友可直接跳转到 Array.prototype.indexOf() 文档。

只想了解核心结论的读者，以下是官方描述。

indexOf() compares searchElement to elements of the Array using strict equality (the same method used by the === or triple-equals operator).

一目了然，这里使用的是严格相等（===）。在类似判断中需多加留意，切勿误以为数字会自动转为字符串，同理字符串也不会转换为数字。

总结

总结

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。