详解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 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
js打开新窗口方法整理
Feb 17 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
javascript使用正则表达式实现注册登入校验
Sep 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
php7安装yar扩展的方法详解
2017/08/03 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
零基础学Python(一)Python环境安装
2014/08/20 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
计算机专业个人求职自荐信
2013/09/21 职场文书
最新大学生自我评价
2013/09/24 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
同居协议书范本
2014/04/23 职场文书
科技之星事迹材料
2014/06/02 职场文书
企业公益活动策划方案
2014/08/24 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
2019教师的学习计划
2019/06/25 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
java版 简单三子棋游戏
2022/05/04 Java/Android