js indexOf使用及注意事项以及数组使用indexOf

一、定义和用法

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

语法

stringObject.indexOf(searchvalue,fromindex)

参数	描述
searchvalue	必需。规定需检索的字符串值。
fromindex	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

说明

该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

提示和注释

注释：indexOf() 方法对大小写敏感！

注释：如果要检索的字符串值没有出现，则该方法返回 -1。

实例

在本例中，我们将在 "Hello world!" 字符串内进行不同的检索：

<script type="text/javascript">

var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))

</script>

以上代码的输出：

0
-1
6

以上参考于w3cW3C indexOf用法

二、字符串indexOf使用

一、字符串使用indexOf很简单

是否包含某传入的相同字符，不包含返回-1,包含则返回其下标（只返回包含的第一个下标）；indexOf() 方法对大小写敏感！

let arr=str="arra";
str.indexOf('a') //结果为 0 包含  有两个a只返回第一个的下标
str.indexOf('A') //结果为-1 不包含 对大小写敏感

二、数组使用indexOf（前提是必须寻找整个项）

（1）数组项为数字或者字符串数字

 我一直以为indexOf只适用于字符串，结果在之前的项目里看到数组也能使用很新奇，使用的方法及注意事项（踩坑）特此记录分享一下。

let arr=['1','2','1'];
arr.indexOf('1'); // 0 包含 只返回包含的第一个下标
arr.indexOf(1); // -1 不包含  从这可以看出数组使用indexOf区分类型（type）
arr.indexOf(String(1)); // 0 包含  从这可以看出数组使用indexOf区分类型（type）

总结：

数组项为数字或者字符串数字数组使用indexOf() 方法对类型也敏感。

（2）数组项为字符串

let arr=['abbc','b'];
arr.indexOf('b') ; //1  包含
arr.indexOf('B') ; //-1 不包含 说明对大小写依然敏感
arr.indexOf('c') ; //-1 不包含 对比整个项（而不是一个项里找）注意不要误解：不要认为arr[0]='abbc' arr.indexOf('c') 它不会对一个项里查找

总结：

数组项为字符串数组使用indexOf() 方法对大小写敏感。

使用场景：

1.找出数组是否包含某一个值

   比如：arr =['abc','bb'];是否包含bb这一项

let arr=['abc','bb'];
arr.indexOf('bb'); //返回 1 包含（注意类型）

if(arr.indexOf('bb')>-1){
  alert(包含)
}

一般项目中都会判断indexOf是否大于-1来判断是否包含。

 lastIndexOf和indexOf差不多，前者只是返回包含的最后一项标，后者是第一项下标。上面的也适用于lastIndexOf

数组是否包含某个值，还可以使用includes和find。当然循环遍历判断也行(some,every,filter,map,for等)；

let arr=[1,,2,3]
let a=false;
arr.map((item)=>{
  if(item=='1'){
   a=true;
 }  
})
if(a){
 alert('包含')
}

补充：

其实es6数组字符串都出了个 includes方法 和 indexOf类似 ，includes有兼容性问题，如果浏览器不支持es6的语法就无法使用。不过现代高版本浏览器几乎都支持(可以在这个网站查看兼容图"includes" | Can I use... Support tables for HTML5, CSS3, etc)。

 

用法也很简单就是 .includes即可 。需要注意的是 数组调用时 也需要保持类型相同 （下面的代码也体现出来了，20是 输出true ,字符串20时 输出false）。

    let arr=[11,23,20];
    console.log(arr.includes(20),arr.includes("20")); //true false

    let str="abx";
    console.log(str.includes("a")); //true