详解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的千分位算法实现思路
Jul 31 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
ES6箭头函数和扩展实例分析
May 23 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
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
php实现图片压缩处理
2020/09/09 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
python简单实现操作Mysql数据库
2018/01/29 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
TCP/IP的分层模型
2013/10/27 面试题
办理退休介绍信
2014/01/09 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
个性与发展自我评价
2015/03/06 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js