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 = [,,,,];
var results;
var _list = [];
results = _.map(list,function(n){
if(!(n % )){
return n;
}
})
for(var i = ; i< results.length; i++){
if(results[i] != undefined){
_list.push(results[i]);
}
}
console.log(_list); });

注火狐运行结果是[2,4]

underscore中的遍历操作就讲这些,接下来继续激情的前进着。。。

underscore.js依赖库函数分析一(遍历)的更多相关文章

  1. underscore.js依赖库函数分析二(查找)

    查找: 在underscore.js封装了对dom查找的操作,find()和filter()函数,find()函数的查找操作是返回首个与条件相符的元素值,filter()函数是找到与条件相符的所有元素 ...

  2. underscore.js 源码分析5 基础函数和each函数的使用

    isArrayLike 检测是数组对象还是纯数组 var property = function(key) { return function(obj) { return obj == null ? ...

  3. underscore.js源码解析(五)—— 完结篇

    最近公司各种上线,所以回家略感疲惫就懒得写了,这次我准备把剩下的所有方法全部分析完,可能篇幅过长...那么废话不多说让我们进入正题. 没看过前几篇的可以猛戳这里: underscore.js源码解析( ...

  4. 深入解析Backbone.js框架的依赖库Underscore.js的作用

    这篇文章主要介绍了深入解析Backbone.js框架的依赖库Underscore.js的作用,用过Node.js的朋友对Underscore一定不会陌生:)需要的朋友可以参考下 backbone必须依 ...

  5. 高德JS依赖分析工程及关键原理

    一.背景 高德 App 进行 Bundle 化后,由于业务的复杂性,Bundle 的数量非常多.而这带来了一个新的问题——Bundle 之间的依赖关系错综复杂,需要进行管控,使 Bundle 之间的依 ...

  6. HiShop2.x版本中的上传插件分析,得出所用的模板语言为Underscore.js 1.6.0且自己已修改

    效果: 上传组件非常的酷,但是分析其使用JS写法使用了模板语言的,代码如下: <script type="text/j-template" id="tpl_popb ...

  7. Underscore.js 1.3.3 源码分析收藏

    Underscore是一个提供许多函数编程功能的库,里面包含了你期待(在Prototype.js和Ruby中)的许多功能.但是没有扩展任何内置的Javascript对象,也就是说它没有扩展任何内置对象 ...

  8. underscore.js 分析 第三天

    // Create a safe reference to the Underscore object for use below. // 为Underscore对象创建一个安全的引用 // _为一个 ...

  9. Backbone.js源码分析(珍藏版)

    源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone ...

随机推荐

  1. Python--set常用操作函数

    python提供了常用的数据结构,其中之一就是set,python中的set是不支持索引的.值不能重复.无需插入的容器. 简单记录下set常用的操作函数: 1.新建一个set: set("H ...

  2. 线段树(main函数自由)

    都是一些裸线段树的模板,无主函数! #include<cstdio> #include<algorithm> #include<cstring> #include& ...

  3. 线程变量ThreadLocal的使用

    我们有时候会通过token进行多次查询(猪:token是redis中的key),比如: 一次是在登录拦截器中,一次是在controller的业务中查询,这样存在性能和资源的浪费问题!!! 那么如何将拦 ...

  4. DB2 上copy表结构及数据

    现已有一行数据,要复制为多行,每行只有两个字段值不同,db2 没有sql server的top关键字,本只想复制几次,然后update逐条数据,发现不行. 然后想到不如临时创建一张表B,插入此行数据, ...

  5. NYOJ题目436sum of all integer numbers

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAr0AAAHKCAIAAACBiWRrAAAgAElEQVR4nO3dP1LjSts34G8T5CyEFB

  6. CLR via C#(11)-无参属性、有参数属性(索引器)

    一. 无参属性 1. 定义属性 无参属性就是我们最常见的属性方式,在赋值时可以加入一定的逻辑判断.属性的定义其实不复杂,先看个直观的例子: 说明: 属性要定义名称和类型,且类型不能是void. 属性是 ...

  7. struts标签<logic:iterate>的用法

    <logic:iterate>主要用来处理在页面上输出集合类,集合一般来说是下列之一: 1. java对象的数组 2. ArrayList.Vector.HashMap等 具体用法请参考s ...

  8. static_cast、dynamic_cast、reinterpret_cast、const_cast以及C强制类型转换的区别

    static_cast 1. 基础类型之间互转.如:float转成int.int转成unsigned int等 2. 指针与void*之间互转.如:float*转成void*.CBase*转成void ...

  9. 【java】 获取计算机信息及Java信息

    获取计算机名称,操作系统信息,java信息 package com.agen.test1; import java.io.BufferedReader; import java.io.InputStr ...

  10. vim 标准环境的配置

    最近刚刚从IDE转到了vim,很多习惯不一致,特地配置了一下vim环境.在网上找了大神的帖子,怕忘记了,特此纪念. 传送门     http://www.cnblogs.com/ma6174/arch ...