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


Posted in Javascript onMarch 13, 2016

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的数组。

Javascript 相关文章推荐
超简单的jquery的AJAX用法
May 10 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 #Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 #Javascript
Node.js的Express框架使用上手指南
Mar 12 #Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 #Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 #Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 #Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 #Javascript
You might like
PHP常用代码
2006/11/23 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
Bootstrap表单布局
2016/07/19 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
Python+Opencv识别两张相似图片
2020/03/23 Python
Python模拟登陆实现代码
2017/06/14 Python
Django入门使用示例
2017/12/12 Python
Python 元类实例解析
2018/04/04 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
荷叶母亲教学反思
2014/04/30 职场文书
党的群众路线学习材料
2014/05/16 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
python实现过滤敏感词
2021/05/08 Python
TS 类型兼容教程示例详解
2022/09/23 Javascript
python中使用redis用法详解
2022/12/24 Redis