underscore.js依赖库函数分析一(遍历)
Underscore简介:
underscore是一个非常简洁,实用的javascript库,和jQuery封装类型差不多,但underscore是backbone的依赖 库,想运行backbone就必须先引入underscore.js。“_”开头是依赖库underscore的一个特征,用于区分其他库函数名。“.” 以后就是函数的名称。
Underscore函数:
underscore中封装了60多个函数,供开发者使用,接下来我进行分类一个个分析。
1.遍历
在underscore中,提供了each 和map遍历操作,这2个都有一个共同的特征,就是根据一定的条件去遍历集合中的每一个元素。但他们之间的操作方式却是不同的。
each()函数:
调用的格式:
_.each(list,iterator,[context])
该函数式根据iterator迭代器提供的过滤条件,遍历list列表中的每一个元素。
源码:
var each = _.each = _.forEach = function(obj, iterator, context) {if (obj == null) return;if (nativeForEach && obj.forEach === nativeForEach) {//如果宿主环境支持, 则优先调用JavaScript 1.6提供的forEach方法 obj.forEach(iterator, context);} else if (obj.length === +obj.length) {// 对[数组]中每一个元素执行处理器方法for (var i = 0, length = obj.length; i < length; i++) {if (iterator.call(context, obj[i], i, obj) === breaker) return;}} else {// 对{对象}中每一个元素执行处理器方法var keys = _.keys(obj);for (var i = 0, length = keys.length; i < length; i++) {if (iterator.call(context, obj[keys[i]], keys[i], obj) === breaker) return;}}};
函数思路:如果宿主支持原生的forEach方法,那就是直接调用原生的,如果不支持就走遍历方式,(一般为浏览器或node.js支持原生的forEach方法)。
这里有一个判断方式很少见,obj.length === +obj.length。
一般我们判断2个参数“==”用双等于,但这里用全等于“===”,先说下全等于,用双等于我们比对的2个相同的值为true,而全等于比对则返回false,因为全等于不会将比对的对象类型进行转换。后面有个“+”号,作用是将+号后面的操作转换成数字类型。查阅了一下资料:分析了作者为什么用这样的写法:如果obj参数类型是字符串,我们可以拿到length属性,如果是一个function或一个数组,也可以拿到length属性,如果是一个Object对象,我们就拿不到length属性了。对于非数组,非函数,非字符串的我们同for in循环遍历数据。
用_.each编写的小实例如下:
/*** Created by 蒯灵敏 on 14-10-4.*/ $(function(){var list = [1,2,3,4,5];_.each(list,function(n){if(!(n % 2)){console.log(n);}}); });
注:上述代码功能是在控制台中输出偶数,结果(2,4)。iterator迭代器是一个自定义的函数。each()函数是没有返回值。
map()函数:
调用的格式:
_.map(list,iterator,[context])
该函数的功能是根据iterator迭代器的函数,遍历list列表中的每一个元素,在完成列表元素遍历之后该函数将返回一个数组对象。
先看源码:
_.map = _.collect = function(obj, iterator, context) {// 用于存放返回值的数组var results = [];if (obj == null) return results;// 优先调用宿主环境提供的map方法if (nativeMap && obj.map === nativeMap) return obj.map(iterator, context);// 迭代处理集合中的元素each(obj, function(value, index, list) {// 将每次迭代处理的返回值存储到results数组 results.push(iterator.call(context, value, index, list));});//返回结果return results;};
注:map/collect函数与each的区别在于map/collect会存储每次迭代的返回值, 并作为一个新的数组返回
实例代码如下:
/*** Created by 蒯灵敏 on 14-10-4.*/ $(function(){var list = [1,2,3,4,5];var results;results = _.map(list,function(n){if(!(n % 2)){return n;}})console.log(results);});
注:在火狐运行之后的结果是[undefined,2,undefined,4,undefined]
在这个结果中我们可以看出对于不符合条件的数组元素都变成了“undefined”,如果提取出可用数组来还需要一个遍历操作, 代码如下:
$(function(){var list = [1,2,3,4,5];var results;var _list = [];results = _.map(list,function(n){if(!(n % 2)){return n;}})for(var i = 0; i< results.length; i++){if(results[i] != undefined){_list.push(results[i]);}}console.log(_list);});
注火狐运行结果是[2,4]
underscore中的遍历操作就讲这些,接下来继续激情的前进着。。。
转载于:https://www.cnblogs.com/kuailingmin/p/4005735.html
underscore.js依赖库函数分析一(遍历)相关推荐
- underscore.js 源码分析5 基础函数和each函数的使用
isArrayLike 检测是数组对象还是纯数组 var property = function(key) {return function(obj) {return obj == null ? vo ...
- 高德JS依赖分析工程及关键原理
一.背景 高德 App 进行 Bundle 化后,由于业务的复杂性,Bundle 的数量非常多.而这带来了一个新的问题--Bundle 之间的依赖关系错综复杂,需要进行管控,使 Bundle 之间的依 ...
- HiShop2.x版本中的上传插件分析,得出所用的模板语言为Underscore.js 1.6.0且自己已修改...
效果: 上传组件非常的酷,但是分析其使用JS写法使用了模板语言的,代码如下: <script type="text/j-template" id="tpl_popb ...
- Underscore.js 入门
Underscore封装了常用的JavaScript对象操作方法,用于提高开发效率.它本身与我们介绍的主题"Backbone"没有半毛钱的关系,因此你可以完全不理会"Ba ...
- Underscore.js常用方法介绍
Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程.MVC框架Backbone.js就将这个库作为自 ...
- 【Web技术】1176- 前端模块依赖关系分析与应用
Meta 摘要 这篇分享主要的内容是是如何使用webpack的stats对象进行依赖和编译速度的解析,该对象包含大量的编译时信息,我们可以用它生成包含有关于模块的统计数据的 JSON 文件.这些统计数 ...
- Underscore.js 基础学习
概述 Underscore对象封装 优先调用JavaScript 1.6内置方法 改变命名空间 链式操作 扩展Underscore 遍历集合 函数节流 模板解析 Underscore封装了常用的Jav ...
- impress.js 源码分析
impress.js 源码分析 之前做展示用幻灯片,我一直热衷于使用PPT,刚开始学习PPT时总是强行使用各种页面特效,越做越复杂.现在看来,学技术大概都要经历一个从简到繁再到简的过程吧.后来,无 ...
- Underscore.js 入门教程
出处:http://web.jobbole.com/87537/ 总结: Underscore.js 是一个由 Jeremy Ashkenas 开发的 JavaScript 库,它提供了许多作为开发者 ...
最新文章
- 文件分区格式化及挂载
- 聚焦与发散——浅谈编程的发展方向
- MATLAB中常用的排列、组合、阶乘函数
- java注解执行顺序_如何确保java中的注释执行顺序?
- centOS安装openoffice的方法
- c3p0配置及其说明
- 【Flink】 Flink JobManager HA 机制的扩展与实现
- java.util.ConcurrentModificationException错误解决方案
- 藩国进贡,朝庭厚赐,吃亏了吗?
- 物联网老年人健康管理系统源码
- 傻瓜式自制鼠标光标,超简单
- 前后端分离实现上传图片的功能
- python刷步数程序设计_利用python+云函数搭建自己的修改步数api接口
- 第二章:软件测试的方法
- 统计200~1000之间能被7整除数的个数。
- 魅蓝e android无限重启,魅蓝E怎么Root?魅蓝E一键ROOT教程(系统自带Root功能)
- 冷却红外成像的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- 学生考勤管理系统(优秀评分)
- Linux 安装docker教程
- Java使劲浪费内存-List查询一千万条数据重复次数
热门文章
- sequelize 增加数据库字段_sequelize 5.0中文文档连接数据源及数据类型 (一) - node.js语言最好用的orm...
- jsp文件过大,is exceeding 65535 bytes limit
- weex android 滑动事件,【报Bug】weex编译模式下slider组件 @scroll 事件, 滑块左右滑动, @scroll 回调的值始终是负数, 判断不了左右动作...
- mysql union 放弃索引_MySQL索引优化和in or替换为union all
- angular蚂蚁_angular4 调用api
- 设计模式—单例模式(思维导图)
- opencv 调整图像亮度和对比度
- 图像仿射变换之倾斜的python实现
- [PyTorch] PyTorch版本不兼容问题+更新日志链接
- [Python] numpy.ndenumerate() 获得一对数组坐标和值