详解JavaScript中数组和字符串的lastIndexOf()方法使用

 更新时间:2016年03月13日 10:23:06   作者:kris  
这篇文章主要介绍了详解JavaScript中数组和字符串的lastIndexOf()方法使用,文中特别提及了IE8的兼容问题以及for in的使用问题,需要的朋友可以参考下

Array.prototype.lastIndexOf 和 String.prototype.lastIndexOf 是非常的实用的方法,不过很多人不知道它其实可以传递两个参数,第二个参数决定了搜索的起始位置:

语法

str.lastIndexOf(searchValue[, fromIndex])

lastIndexOf() 方法返回指定值在调用该方法的字符串中最后出现的位置,如果没找到则返回 -1。从该字符串的后面向前查找,从 fromIndex 处开始。

参数

1.searchValue
一个字符串,表示被查找的值。
2.fromIndex
从调用该方法字符串的此位置处开始查找。可以是任意整数。默认值为 str.length。如果为负值,则被看作 0。如果 fromIndex > str.length,则 fromIndex 被看作 str.length。

区分大小写

lastIndexOf 方法区分大小写。例如,下面的表达式返回 -1:

"Blue Whale, Killer Whale".lastIndexOf("blue"); // returns -1

lastIndexOf的用法

// Create an array.
var ar = ["ab", "cd", "ef", "ab", "cd"];

// 找到最后一个CD的位置
document.write(ar.lastIndexOf("cd") + "<br/>");
// 输出: 4

// 从正数第二个位置,搜索倒数第一个CD的位置
document.write(ar.lastIndexOf("cd", 2) + "<br/>");
// 输出: 1

// 从倒数第三个搜索最后一个ab的位置
document.write(ar.lastIndexOf("ab", -3) + "<br/>");
// 输出: 0

同样 String.lastIndexOf的用法类似

"canal".lastIndexOf("a") // returns 3
"canal".lastIndexOf("a",2) // returns 1
"canal".lastIndexOf("a",0) // returns -1 从第0个往前搜,不存在'a',返回-1
"canal".lastIndexOf("x") // returns -1

lastIndexOf的IE8实现

不过微软的IE8及其以下并不支持Array.lastIndexOf,需要兼容实现。可以参考:

if (!Array.prototype.lastIndexOf) {
 Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
 'use strict';

 if (this === void 0 || this === null) {
  throw new TypeError();
 }

 var n, k,
  t = Object(this),
  len = t.length >>> 0;
 if (len === 0) {
  return -1;
 }

 n = len - 1;
 if (arguments.length > 1) {
  n = Number(arguments[1]);
  if (n != n) {
  n = 0;
  }
  else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) {
  n = (n > 0 || -1) * Math.floor(Math.abs(n));
  }
 }

 for (k = n >= 0
   ? Math.min(n, len - 1)
   : len - Math.abs(n); k >= 0; k--) {
  if (k in t && t[k] === searchElement) {
  return k;
  }
 }
 return -1;
 };
}

可以使用 ES5-Slim 使旧版浏览器完全兼容ES5语法。

为什么要避免使用for in

不过要注意的是,在Array.prototype上面附加方法后,for in语法也会把lastIndexOf方法也枚举出来:

for (var idx in [1,3,5,7,9]) {
 console.log(idx)
}

>> 0 1 2 3 4 lastIndexOf

而应该使用 for loop实现

for (var idx = 0; idx < [1,3,5,7,9].length; idx++) {
 console.log(idx)
}

这个问题可以使用 Object.defineProperty 来实现,来避免for in的枚举出lastIndexOf方法:

Object.defineProperty(Array, "lastIndexOf", { enumerable: false })

不过一般需要兼容实现的浏览器根本不支持defineProperty 方法。并且在多数浏览器上for in都比for loop要慢很多,因此应该尽量避免使用for in。但是如何枚举Object属性的key呢? 使用Object.keys({ a:1 })即可返回关于keys的数组。

相关文章

  • JS中Object对象的原型概念基础

    JS中Object对象的原型概念基础

    本篇文章是一篇关于JS学习的基础内容,学习Object对象的原型概念,有兴趣的朋友参考下吧。
    2018-01-01
  • 深入了解JS之作用域和闭包

    深入了解JS之作用域和闭包

    这篇文章主要介绍了JS之作用域和闭包的相关知识,文中讲解非常详细,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-06-06
  • 浅谈JS和jQuery的区别

    浅谈JS和jQuery的区别

    这篇文章主要介绍了JS和jQuery的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • javascript input图片上传及预览,FileReader预览图片

    javascript input图片上传及预览,FileReader预览图片

    本文放置了html完成代码案例,有需要大家可以直接复制测试功能,采用input文本框图片上传,使用FileReader预览图片效果
    2021-06-06
  • 使用JavaScript制作一个简单的计数器的方法

    使用JavaScript制作一个简单的计数器的方法

    这篇文章主要介绍了使用JavaScript制作一个简单的计数器的方法,用于计算网页用户的来访次数,需要的朋友可以参考下
    2015-07-07
  • JavaScript CSS修改学习第五章 给“上传”添加样式

    JavaScript CSS修改学习第五章 给“上传”添加样式

    在所有的表单项里面,文件上传部分是最难添加样式的。IE支持一些(不是很多)样式属性,Mozilla很少,其他浏览器几乎没有。“浏览”按钮在CSS操作里面也很难访问。
    2010-02-02
  • 详解a标签添加onclick事件的几种方式

    详解a标签添加onclick事件的几种方式

    这篇文章主要介绍了a标签添加onclick事件的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • JavaScript高级程序设计(第3版)学习笔记9 js函数(下)

    JavaScript高级程序设计(第3版)学习笔记9 js函数(下)

    函数是一种对象,拥有一般对象具有的所有特征,除了函数可以有自己的属性和方法外,还可以做为一个引用类型的值去使用,实际上我们前面的例子中已经有过将函数作为一个对象属性的值,又比如函数也可以作为另一个函数的参数或者返回值,异步处理中的回调函数就是一个典型的用法
    2012-10-10
  • js装饰设计模式学习心得

    js装饰设计模式学习心得

    本片文章给大家分享一下作者学习Javascript装饰设计模式后的心得以及要点分享,有兴趣的朋友参考下。
    2018-02-02
  • 前端面试题及答案整理(二)

    前端面试题及答案整理(二)

    上一篇从常见数据结构算法、JavaScript两个方面从面试的角度进行了整理,本文将对其余内容进行补充
    2016-08-08

最新评论