前端开发:JS中 indexOf() 方法的使用

前言

在前端开发过程中,对数组的数据进行处理也是比较常见的操作之一,而且对数组进行操作的频率远远大于对 对象进行操作,因此在开发过程中对于数组里面的数据进行处理是一项比较重要的技能,尤其是对于刚入行的前端开发者来说尤为重要,所以一定要掌握好相关技能。本篇博文来分享一下关于indexOf() 方法的使用,它不仅可以在Array中使用,也可以String中使用,所以本文就直接把indexOf() 方法的不同使用场景放一起来讲解,不在只局限于indexOf() 方法在Array中使用。

一、indexOf() 方法对Array的使用

1、定义

    indexOf() 方法可返回数组中某个指定的元素位置。

2、语法

array.indexOf(item,start);

3、参数说明

说明

参数描述
item必需。查找的元素。
start可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length – 1。如省略该参数,则将从字符串的首字符开始检索。

返回值

类型描述
Number元素在数组中的位置,如果没有搜索到则返回 -1。

4、用法

    indexOf() 方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。

5、注意事项

 (1)如果在数组中没找到指定元素则返回 -1;

 (2)如果想要查找字符串最后出现的位置,请使用lastIndexOf() 方法。

6、使用实例

    根据实际开发过程中的不同需求,把实战中比较常见的处理方式汇总出来,需求是做不完的,也不可能全部覆盖到,这里只分享一些比较常见的操作,方便有需要的开发者查阅使用,具体的实例如下所示。

1.查找数组中的 “dog” 元素

var animals = [“cat”, “dog”, “duck”, "monkey"];var a = animals.indexOf("dog");console.log(a);   //输出结果:dog

2.查找数组中 “Apple” 的元素, 在数组的第二个位置开始检索

var animals = [“cat”, “dog”, “duck”, "monkey”, “dog”];var a = animals.indexOf("dog”, 2);console.log(a);   //输出结果:4

3.判断数组a中是否包含对象b

const findex = this.onProjectList.indexOf(this.tmprow);
前端开发:JS中 indexOf() 方法的使用
前端开发:JS中 indexOf() 方法的使用

二、indexOf() 方法对String的使用

1、定义

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

2、语法

string.indexOf(searchvalue,start);

3、参数说明

说明

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

返回值

类型描述
Number查找指定字符串第一次出现的位置,如果没找到匹配的字符串则返回 -1。

4、用法

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

5、注意事项

 (1)如果在数组中没找到指定元素则返回 -1;

 (2)indexOf() 方法区分大小写。

6、使用实例

    根据实际开发过程中的不同需求,把实战中比较常见的处理方式汇总出来,需求是做不完的,也不可能全部覆盖到,这里只分享一些比较常见的操作,方便有需要的开发者查阅使用,具体的实例如下所示。

1.查找字符串 “vue”

var str ="Hello world, hello vue.”;
var b = str.indexOf(“vue”);
console.log(b);   //输出结果:19

2.查找字符 “e” 第一次出现的位置

var str ="Hello world, hello vue.”;
var b = str.indexOf(“vue”);
console.log(b);   //输出结果:1


3.
在字符串第四个位置开始查找字符 “o” 第一次出现的位置

var str ="Hello world, hello vue.”;
var b = str.indexOf(“vue”);
console.log(b);   //输出结果:7

4.过滤数据源中包含“被驳回” 的数据

let tmplist = r.data.rows.filter((e) => {
         return e.currentNode.indexOf("被驳回") == -1; //把没有包含“被驳回”的数据取出来
 });
前端开发:JS中 indexOf() 方法的使用
前端开发:JS中 indexOf() 方法的使用

    indexOf() 方法除了对array string进行处理之外,还可以对number进行处理,只是需要把number转化成string才能使用;还可以对数组进行去重处理;而且 indexOf() 方法在数组中使用的时候有findIndex() 方法类似的功能,即返回数组中某个指定的元素位置,这里就不再一一赘述。

最后

    上面内容就是JS中 indexOf() 方法的使用集合,也总结了 indexOf() 方法的使用场景集锦,系统全面的介绍了 indexOf() 方法的使用总结,方便开发者查阅使用。

    以上就是本章的全部内容,欢迎关注三掌柜的微信公众号“程序猿by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

三掌柜的微信公众号:

发表评论

登录后才能评论
服务中心
服务中心
联系客服
联系客服
返回顶部