Js基础-indexOf()方法的使用

原文出自：https://www.jianshu.com/p/14635c245323

在工作中 , indexOf（）方法使用频率非常高 , 因此做个简单总结 , 理顺知识点

基本定义
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到返回-1

indexOf()只返回字符串在规定的查找顺序中，首次出现的位置

工作中应用 => 如果要检索的字符串值没有出现，则该方法返回 -1

一 语法

stringObject.indexOf(searchvalue,fromindex)

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

二 indexOf（） 方法在数组和字符串的具体使用

该方法返回某个元素在字符串中或数组中的位置。

<1> 对String 类型的使用

let str = 'orange';

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

<2> 对Array 类型的使用

array.indexOf(item,start)
返回元素在数组中的位置，若没检索到，则返回 -1。
参数 描述
item 必须。查找的元素
start 可选。规定检索的位置，它的合法取值是 0 到 stringObject.length - 1。

找数组中的元素 也可以使用es6的find()方法

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

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

var arr = [1,2,3];
console.log(arr.indexOf(1));//0
console.log(arr.indexOf(2));//1
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(4));//-1

<3> 对Number 类型无法使用

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

三 使用indexOf()对数组进行去重

//写法一
var newArr =  [ ];
 arr.forEach(function(v){ // 使用forEach循环遍历,获取原始数组arr中的所有数值
            // 在新数组中,查找当前获取的原始数组的数值
            // newArr.indexOf(v) 执行结果如果是 -1
            // 证明在新数组中,没有这个原始数组的数据
 newArr.indexOf(v) 
    if(newArr.indexOf(v) === -1){
              // 将这个数据,写入到新数组中
                newArr.push(v)
            }
        })
        console.log( newArr );

// 写法二 
var arr = ['C','A','A','G','G','G','D']
        var newArr = []
        arr = arr.sort(function(a,b){
            return a > b
        }).forEach(function(n){
            if(newArr.indexOf(n) == -1){
                newArr.push(n)
            }
        })
        console.log(newArr);// ["A", "C", "D", "G"]

// 写法三
var arr = ['a','c','b','d','a','b']
        var arr2 = [];
        for(var i = 0;i<arr.length;i++){
            if(arr2.indexOf(arr[i])<0){
                arr2.push(arr[i]);
            }
        }
        arr2.sort();
        console.log(arr2);//["a", "b", "c", "d"]

四 js数组的findIndex和indexOf对比

<1>findIndex()

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组，函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

参考这篇文章
https://www.jianshu.com/p/1c15be16a85a

<2> indexOf

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

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

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

对比

对比：

1、findIndex()和indexOf方法实现都是通过循环遍历查找。

2、findIndex()的应用场景要比indexOf广泛一些，可以查找大于等于小于，表达式可以随便写，indexOf就只能在第一层查找相等的值。

3、findIndex()实际上相当于一个for循环，只不过找到了你不需要自己退出。