详解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 15 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
js style动态设置table高度
Oct 21 Javascript
jQuery.each使用详解
Jul 07 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
详解Vue Cli浏览器兼容性实践
Jun 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 curl 抓取AJAX异步内容示例
2014/09/09 PHP
php缓冲输出实例分析
2015/01/05 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
PHP实现微信提现功能
2018/09/30 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
centos7之Python3.74安装教程
2019/08/15 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
python温度转换华氏温度实现代码
2020/12/06 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
优秀应届生推荐信
2013/11/09 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
初一地理教学反思
2014/01/16 职场文书
运动会开幕式解说词
2014/02/05 职场文书
小松树教学反思
2014/02/11 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
市场营销毕业求职信
2014/08/07 职场文书
决心书格式范文
2015/09/23 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL