重新封装 JavaScript 里的 String.indexOf()方法

发表于 分类于 ，

indexOF() 方法

  JavaScript 的 String 对象中有一个 indexOf() 方法，这个方法接收一个指定字符串参数（必须）和查找位置参数（可选）。该方法返回指定字符串在字符串中第一次出现的位置，如果没有出现，则返回”-1”。如果有传查找位置参数，则从传入的位置查起，如果没有传位置参数默认为 0，即从字符串的开头查起。

  说完了这个函数的功能，那么我们如何自己封装一个一样功能的方法呢？

  先说思路。首先当传入了指定字符串后，我们可以将指定字符串的第一个字符作为一个变量保存起来；然后用这个变量在循环内依次和字符串相比较；如果相同，则进一步比较相同长度下，是否完全相同即可。最后返回相应的结果数值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 重新封装String.indexOf函数
// 调用方式与原生的方法略有不同，将字符串变为函数的第一个参数，其它不变
// str为字符串；findStr为指定的字符串；index为查找位置，不传则默认为0
function indexOF(str, findStr, index = 0) {
  if (typeof str === 'string' && typeof findStr === 'string' && typeof index === 'number') {
    // 将指定字符串的第一个字符作为一个变量保存
    let firstStr = findStr[0]
    for(let i = index; i < str.length; i++) {
      // findStr与str中查询部分首字符相同则进一步查询
      if (str[i] === firstStr) {
        // 完全相同
        if (str.substr(i, findStr.length) === findStr) {
          return i
        } else {
          continue
        }
      } else {
        continue
      }
    }
    return -1
  } else {
    alert('function indexOF的传入参数格式有误，请重新传入正确的参数执行查询！')
    return undefined
  }
}

  写完了来调用试验一下结果（调用方式与原生的方法略有不同）：

1
2
3
console.log(indexOF('xiekaifei', 'i'))     // 1
console.log(indexOF('xiekaifei', 'i', 3))  // 5
console.log(indexOF('xiekaifei', 'ok'))    // -1

strFind() 方法

  实现了这个方法后我们再来实现一个查询所有位置的方法。实现的功能是：传入字符串和指定的字符串，返回所有出现位置的数组，未找到时则返回-1。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function strFind(str, findStr) {
  if (typeof str === 'string' && typeof findStr === 'string') {
    let arr = []
    let index = 0
    for (let i = 0; i < str.length; i++) {
      // 调用刚刚封装好的indexOF()方法查询，并将查询结果暂时保存给num参数
      let num = indexOF(str, findStr, index)
      if (num >= 0) {
        arr.push(num)
        index = ++num
      } else {
        break
      }
    }
    if (arr.length > 1) {
      // 返回所有出现的位置的数组
      return arr
    } else if (arr.length === 1) {
      // 只出现一次的话直接返回位置
      return arr[0]
    } else {
      // 未出现返回-1
      return -1
    }
  } else {
    alert('function strFind的传入参数格式有误，期待两个字符串参数，请重新传入正确的参数执行查询！')
    return undefined
  }
}

  再调用一下：

1
2
3
console.log(strFind('xiekaifei', 'i'))   // [1, 5, 8]
console.log(strFind('xiekaifei', 'fe'))  // [6]
console.log(strFind('xiekaifei', 'ok'))  // -1

  大功告成！