详解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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
Javascript复制实例详解
Jan 28 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 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 array_search() 函数使用
2010/04/13 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
Django卸载之后重新安装的方法
2017/03/15 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
keras输出预测值和真实值方式
2020/06/27 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
英国探险旅游专家:Explore
2018/12/20 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
2014年妇产科工作总结
2014/12/08 职场文书
个人党性分析总结
2015/03/05 职场文书
学校就业保障协议书
2019/06/24 职场文书
小学记事作文之200字
2019/08/06 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
Python first-order-model实现让照片动起来
2022/06/25 Python