详解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按字节截取字符长度实例
Nov 20 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
vue随机验证码组件的封装实现
Feb 19 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/07/20 PHP
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
js实现交通灯效果
2017/01/13 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
微信小程序网络请求封装示例
2018/07/24 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
vue实现计步器功能
2019/11/01 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python实现海螺图片的方法示例
2019/05/12 Python
python实现大文件分割与合并
2019/07/22 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
Java中实现多态的机制
2015/08/09 面试题
船舶专业个人求职信范文
2014/01/02 职场文书
贷款委托书范本
2014/04/08 职场文书
实习护士自荐信
2014/06/21 职场文书
经典毕业生求职信
2014/07/12 职场文书
科技活动周标语
2014/10/08 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书