详解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 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 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/05/11 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
vue实现简易计算器功能
2021/01/20 Vue.js
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
如何利用find命令查找文件
2015/02/07 面试题
Linux操作面试题
2012/05/16 面试题
怎么写好自荐书
2014/03/02 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
班干部演讲稿
2014/04/24 职场文书
干部选拔任用方案
2014/05/26 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL