Prototype源码浅析 Enumerable部分(二)


Posted in Javascript onJanuary 18, 2012

前面each方法中掉了一个方面没有说,就是源码中的$break和$continue。这两个变量是预定义的,其作用相当于普通循环里面的break和continue语句的作用。出于效率的考虑,在某些操作中并不需要完全遍历一个集合(不局限于一个数组),所以break和continue还是很必要的。
对于一个循环来说,对比下面几种退出循环的方式:

var array_1 = [1,2,3]; 
var array_2 = ['a','b','c']; 
(function(){ 
for(var i = 0, len = array_1.length; i < len; i++){ 
for(var j = 0, len_j = array_1.length; i < len_j; j++){ 
if('c' === array_2[j]){ 
break; 
} 
console.log(array_2[j]); 
} 
} 
})();//a,b,a,b,a,b 
(function(){ 
for(var i = 0, len = array_1.length; i < len; i++){ 
try{ 
for(var j = 0, len_j = array_1.length; i < len_j; j++){ 
if('c' === array_2[j]){ 
throw new Error(); 
} 
console.log(array_2[j]); 
} 
}catch(e){ 
console.log('退出一层循环'); 
} 
} 
})();//a,b,'退出一层循环',a,b,'退出一层循环',a,b,'退出一层循环' 
(function(){ 
try{ 
for(var i = 0, len = array_1.length; i < len; i++){ 
for(var j = 0, len_j = array_1.length; i < len_j; j++){ 
if('c' === array_2[j]){ 
throw new Error(); 
} 
console.log(array_2[j]); 
} 
} 
}catch(e){ 
console.log('退出一层循环'); 
} 
})();//a,b,'退出一层循环'

当我们把错误捕获放在相应的循环层面时,就可以中断相应的循环。可以实现break和break label的作用(goto)。这样的一个应用需求就是可以把中断挪到外部去,恰好符合Enumerable处的需求。

回到Enumerable上来,由于each(each = function(iterator, context){})方法的本质就是一个循环,对于其第一个参数iterator,并不包含循环,因此直接调用break语句会报语法错误,于是Prototype源码中采用上面的第二种方法。

Enumerable.each = function(iterator, context) { 
var index = 0; 
try{ 
this._each(function(value){ 
iterator.call(context, value, index++); 
}); 
}catch(e){ 
if(e != $break){ 
throw e; 
} 
} 
return this; 
};

一旦iterator执行中抛出一个$break,那么循环就中断。如果不是$break,那么就抛出相应错误,程序也稳定点。这里的$break的定义并没有特殊要求,可以按照自己的喜好随便更改,不过意义不大。

Enumerable中的某些方法在一些现代浏览器里面已经实现了(参见chrome原生方法之数组),下面是一张对比图:

Prototype源码浅析 Enumerable部分(二)
在实现这些方法时,可以借用原生方法,从而提高效率。不过源码中并没有借用原生的部分,大概是因为Enumerable除了混入Array部分外,还需要混入其他的对象中。

看上面的图示明显可以看得出,each和map 的重要性,map其实本质还是each,只不过each是依次处理集合的每一项,map是在each的基础上,还把处理后的结果返回来。在Enumerable内部,map是collect方法的一个别名,另一个别名是select,其内部全部使用的是collect这个名字。

检测:all | any | include

这三个方法不涉及对原集合的处理,返回值均是boolean类型。

all : 若 Enumerable 中的元素全部等价于 true,则返回 true,否则返回 false

function all(iterator, context) { 
var result = true; 
this.each(function(value, index) { 
result = result && !!iterator.call(context, value, index); 
}); 
return result; 
}

对于all方法来说,里面的两个参数都不是必须的,所以,内部提供了一个函数,以代替没有实参时的iterator,直接返回原值,名字叫做Prototype.K。Prototype.K的定义在库的开头,是一个返回参数值的函数Prototype.K = function(x){return x;}。另外,在all方法中,只要有一个项的处理结果为false,整个过程就可以放弃(break)了,于是用到了本文开头的中断循环的方法。最后的形式就是:

Prototype.K = function(){}; 
Enumerable.all = function(iterator, context) { 
iterator = iterator || Prototype.K; 
var result = true; 
this.each(function(value, index) { 
result = result && !!iterator.call(context, value, index); 
if (!result) throw $break; 
}); 
return result; 
}

最后返回的result是一个boolean型,偏离一下all,我们改一下result:

function collect(iterator, context) { 
iterator = iterator || Prototype.K; 
var results = []; 
this.each(function(value, index) { 
results.push(iterator.call(context, value, index)); 
}); 
return results; 
}

此时results是一个数组,我们不中断处理过程,保存所有的结果并返回,恩,这就是collect方法,或者叫做map方法。

any:若 Enumerable 中的元素有一个或多个等价于 true,则返回 true,否则返回 false,其原理和all差不多,all是发现false就收工,any是发现true就收工。

function any(iterator, context) { 
iterator = iterator || Prototype.K; 
var result = false; 
this.each(function(value, index) { 
if (result = !!iterator.call(context, value, index)) 
throw $break; 
}); 
return result; 
}

include:判断 Enumerable 中是否存在指定的对象,基于 == 操作符进行比较

这个方法有一步优化,就是调用了indexOf方法,对于数组来说,indexOf返回-1就不可以知道相应元素不存在了,如果集合没有indexOf方法,就只能查找比对了。这里的查找和没有任何算法,一个个遍历而已,如果要改写也容易,不过平时应用不多,因此估计也没有花这个精力去优化这个。所以如果结果为true的时候效率比结果为false的时候要高一些,看运气了。

function include(object) { 
if (Object.isFunction(this.indexOf))//这个判定函数应该很熟悉了 
if (this.indexOf(object) != -1) return true;//有indexOf就直接调用 var found = false; 
this.each(function(value) {//这里的效率问题 
if (value == object) { 
found = true; 
throw $break; 
} 
}); 
return found; 
}

下面是一组过滤数据的方法:返回单个元素:max | min | detect返回一个数组:grep | findAll | reject | partition 其中max和min并不局限于数字的比较,字符的比较一样可以。max(iterator, context)依旧可以带有两个参数,可以先用iterator处理之后再来比较值,这样的好处就是不必局限于特定的数据类型,比如,对象数组按照一定规则取最大值:

console.dir([{value : 3},{value : 1},{value : 2}].max(function(item){ 
return item.value; 
}));//3

因此源码的实现方式可以想象,直接比较的时候,实现方式可以如下:
function max() { 
var result; 
this.each(function(value) { 
if (result == null || value >= result) //result==null是第一次比较 
result = value; 
}); 
return result; 
}

扩展之后,value要进一步变为value = (iterator处理后的返回值):
function max(iterator, context) { 
iterator = iterator || Prototype.K; 
var result; 
this.each(function(value, index) { 
value = iterator.call(context, value, index); 
if (result == null || value >= result) 
result = value; 
}); 
return result; 
}

min的原理也一样。detect和any的原理和接近,any是找到一个true就返回true,detect是找到一个true就返回满足true条件的那个值。源码就不贴了。grep 这个很眼熟啊,一个unix/linux工具,其作用也很眼熟——就是返回所有和指定的正则表达式匹配的元素。只不过unix/linux只能处理字符串,这里扩展了范围,但是基本形式还是没有变。如果集合的每一项都是字符串,那么实现起来回事这样:
Enumerable.grep = function(filter) { 
if(typeof filter == 'string'){ 
filter = new RegExp(filter); 
} 
var results = []; 
this.each(function(value,index){ 
if(value.match(filter)){ 
results.push(value); 
} 
}) 
return results; 
};

但是有一现在要处理的集合可能并都是字符串,为了达到更广泛的应用,首先要考虑的就是调用形式。看上面的实现,注意这么一句:
if(value.match(filter))
其中value是个字符串,match是String的方法,现在要扩展所支持的类型,要么给每一个value都加上match方法,要么转换形式。显然第一种巨响太大,作者转换了思路:
if (filter.match(value))
这么一来,不论value为何值,只要filter有对应的match方法即可,上面对于RegExp对象,是没有match方法的,于是在源码中,作者扩展了RegExp对象:
RegExp.prototype.match = RegExp.prototype.test;
注意上面的match和String的match有本质区别。这么一来,如果value是对象,我们的filter只需要提供相应的检测对象的match方法即可。于是就有:
function grep(filter, iterator, context) { 
iterator = iterator || Prototype.K; 
var results = []; if (Object.isString(filter)) 
filter = new RegExp(RegExp.escape(filter)); 
this.each(function(value, index) { 
if (filter.match(value))//原生filter是没有match方法的。 
results.push(iterator.call(context, value, index)); 
}); 
return results; 
}

对于匹配的结果,可以处理之后再返回,这就是iterator参数的作用。不同于max方法,grep是进行主要操作时候再用iterator来处理结果,max是用iterator处理源数据之后再来进行主要操作。因为grep中的filter代替了max中iterator的作用。至于findAll,是grep的加强版,看过grep,findAll就很简单了。reject就是findAll的双子版本,作用正好相反。partition就是findAll + reject,组合亲子版本。转载请注明来自小西山子【http://www.cnblogs.com/xesam/】

Javascript 相关文章推荐
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
JS中的public和private对象,即static修饰符
Jan 18 #Javascript
DOM 中的事件处理介绍
Jan 18 #Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 #Javascript
JavaScript中常用的运算符小结
Jan 18 #Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 #Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 #Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 #Javascript
You might like
php minixml详解
2008/07/19 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
angular2+node.js express打包部署的实战
2017/07/27 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
python实现堆排序的实例讲解
2020/02/21 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
涉外文秘个人求职的自我评价
2013/10/07 职场文书
大二自我鉴定
2014/01/31 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS