详解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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
jquery.ui.draggable中文文档
Nov 24 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
详解JavaScript中的链式调用
Nov 27 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 加密与解密的斗争
2009/04/17 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
javascript常用方法总结
2015/05/14 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
python 制作本地应用搜索工具
2021/02/27 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
计算机专业职业规划
2014/02/28 职场文书
安全生产管理责任书
2014/04/16 职场文书
个人安全承诺书
2014/05/22 职场文书
培训研修方案
2014/06/06 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
民事答辩状范本
2015/05/21 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python