Prototype源码浅析 String部分(一)之有关indexOf优化


Posted in Javascript onJanuary 15, 2012

添加到String.prototype中的方法比较多,不过归结起来,大致分为下面几类:

分类 方法名 
原始能力增强               strip |  include  |  startsWith  |  endsWith |  empty |  blank
格式 camelize | capitalize |  underscore |  dasherize  | inspect          
变形 toArray |  succ  | times
替换 interpolate  | sub |  scan |  truncate | gsub
HTML处理 stripTags  | escapeHTML |  unescapeHTML
参数序列化 toQueryParams
JSON处理 unfilterJSON |  isJSON |  evalJSON |  parseJSON
脚本处理 stripScripts |  extractScripts  | evalScripts

从基本的原始能力增强开始,下面是具体的实现,这一段很好理解的:

(function(s){ 
function strip(){ 
return this.replace(/^\s+/,'').replace(/\s+$/,''); 
} 
function include(pattern){ 
return this.indexOf(pattern) > -1;//split 
} 
function startsWith(pattern) { 
return this.lastIndexOf(pattern, 0) === 0; 
} 
function endsWith(pattern) { 
var d = this.length - pattern.length; 
return d >= 0 && this.indexOf(pattern, d) === d; 
} 
function empty() { 
return this == ''; 
} 
function blank() { 
return /^\s*$/.test(this); 
} 
s.strip = String.prototype.trim || strip; 
s.include = include; 
s.startsWith = startsWith; 
s.endsWith = endsWith; 
s.empty = empty; 
s.blank = blank; 
})(String.prototype);

上面的strip在jquery里面是$.trim,而且大部分貌似都是trim。这里直接扩展原生原型的悲剧之处就显现出来了,因为后面的JS实现中(比如chrome)就实现了trim方法,那就弄巧成拙了。
function strip(){ 
return this.replace(/^\s+/,'').replace(/\s+$/,''); 
}

这里面的replace(/^\s+/,'')就是trimLeft,replace(/\s+$/,'')是trimRight,不过Prototype.String中没有这两个方法。

下面是这一部分比较有意思的地方:

当时看这段的时候,对其中的startsWith和endsWith甚是不解,按理来说,startsWith用indexOf就可以了,这里却是用的lastIndexOf。后来去翻了一下Prototype1.6版本的实现:

function startsWith(pattern) { 
return this.indexOf(pattern) === 0; 
} function endsWith(pattern) { 
var d = this.length - pattern.length; 
return d >= 0 && this.lastIndexOf(pattern) === d; 
}

可见,以前版本中startsWith用的就是indexOf,不过1.7版本修改了startsWith的实现。在1.7版本中:

startsWith实现中lastIndexOf从后向前查找,不过起点(fromindex)设置为0,因此,只需要检测开头一次就可以了。
endsWith实现中indexOf从前向后查找,由于字符串长度不定,因此这里计算了一下长度,然后再确定了起点(fromindex),因此也只需要检测结尾一次就可以了。

这里的性能优化之处在于,1.6的实现中,如果开头没有匹配(就是startsWith不成立),但是indexOf依旧会向后查找,直到找到一个匹配的或者字符串结尾,这样就浪费了。举个例子,对于下面的一个操作:

'abcdefgabcdefg'.startsWith('abc')
在1.6版本和1.7版本的实现中,没有任何区别,但是我们转换一下:

'abcdefgabcdefg'.startsWith('xesam')
在1.6实现中,startsWith内部的indexOf操作会在开头的a没有和x匹配后,虽然没有必要再继续了,但是indexOf依旧会继续向后查找,直到找到匹配的‘xesam'或者字符串末尾。
在1.7实现中,startsWith内部的lastIndexOf是反向查找的(fromIndex=0),因此在开头的a没有和x匹配后,操作就停止了,因为lastIndexOf已经到头了。
这么一对比,如果待检测的字符串非常长的话,两种实现方式的效率会有明显的区别。
endsWith的原理也是一样的。

Javascript 相关文章推荐
srcElement表格样式
Sep 03 Javascript
JavaScript与函数式编程解释
Apr 27 Javascript
js 字符串操作函数
Jul 25 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 #Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 #Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 #Javascript
20个最新的jQuery插件
Jan 13 #Javascript
JSON 数据格式介绍
Jan 13 #Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 #Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 #Javascript
You might like
php实现随机生成易于记忆的密码
2015/06/19 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
实时获取Python的print输出流方法
2019/01/07 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
tensorflow自定义激活函数实例
2020/02/04 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
python字典按照value排序方法
2020/12/28 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
火山动力Java笔试题
2014/06/26 面试题
写给女生的道歉信
2014/01/14 职场文书
家长写给老师的建议书
2014/03/13 职场文书
计生工作先进事迹
2014/08/15 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python