********************each方法**********************

function each( obj, cbk ) {
/*
* 实现思路:
* 1、首先却分传入进来的是不是likeArray,
* 2、如果是采用 var i = 0 的遍历方法遍历所有的值,
* 然后把遍历到的下标和值依次传给回调使用,并且设置回调内部的this为遍历到的值
* 3、如果不是likeArray,才有for in的遍历方法遍历所有的值,
* 然后把遍历到的键和值依次传给回调使用,并且设置回调内部的this为遍历到的值
* 4、如果回调的返回结果是false,那么中断遍历
* */

var i, len;

// 如果是数组或者伪数组,才有vai i的方式遍历,效率比较高
if( 'length' in obj ) {
for( i = 0, len = obj.length; i < len; i++ ) {

// 把遍历到的键值传给回调使用,如果回调返回false,
// 那么证明对方不需要再遍历其他数据了,所以break跳出循环。
if( cbk.call( obj[ i ], i, obj[ i ] ) === false ) {
break;
}
}
}

// 否则采用for in的遍历方式
else {
for( i in obj ) {

// 把遍历到的键值传给回调使用,如果回调返回false,
// 那么证明对方不需要再遍历其他数据了,所以break跳出循环。
if( cbk.call( obj[ i ], i, obj[ i ] ) === false ) {
break;
}
}
}

return obj;
}

// 测试
var obj = { name: 'xx', age: 'xxx' };
var arr = [ {val:10}, {val:100}, {val:1000} ];
each( obj, function( key, val ) {
console.log( key, val, this );
} );
each( arr, function( index, val ) {

console.log( index, val, this );

// 如果遍历到的对象,val属性值为100,那么就不用遍历剩余的对象了
if( this.val == 100 ) {
return false;
}

} );

********************map方法**************************

/*
* jQ实例的map方法:
* map方法的本意是根据一组数组,按照对应的规则映射成另外一组数据返回。
* 1、返回给回调的参数先是下标,然后是值
* 2、回调函数执行时内部的this就指向遍历到的每一个值(就是回调中接收到的val)
* 3、收集回调返回的结果,如果不为null或undefined,那么存储起来,组成新的实例返回
* */

function map( obj, cbk ) {
/*
* 实现思路:
* 1、先却分遍历的对象是不是likeArr
* 2、是的话var i方式遍历,把遍历的数据传给回调,
* 同时指定回调内部的this为遍历到的值
* 3、不是for in方式遍历,把遍历的数据传给回调,
* 同时指定回调内部的this为遍历到的值
* 4、收集回调的返回结果,如果不为null或undefined,就存储起来,最终一起返回
* */

var i, len, temp, result = [];

if( 'length' in obj ) {
for( i = 0, len = obj.length; i < len; i++ ) {
temp = cbk.call( obj[ i ], i, obj[ i ] );
if( temp != null ) {
result.push( temp );
}
}
}else {
for( i in obj ) {
temp = cbk.call( obj[ i ], i, obj[ i ] );
if( temp != null ) {
result.push( temp );
}
}
}

return result;
}

// 测试
var obj = { name: 'xx', age: 'xxx' };
var arr = [ {val:10}, {val:100}, {val:1000} ];

console.log( map(obj, function (key, val) {

// 收集值为xxx的key
if (val === 'xxx') {
return key;
}
}));

console.log(map(arr, function (index, val) {

// 收集val大于10的对象
if (this.val > 10) {
return this;
}
}));

function map( obj, cbk ) {
/*
* 实现思路:
* 1、先却分遍历的对象是不是likeArr
* 2、是的话var i方式遍历,把遍历的数据传给回调,
* 同时指定回调内部的this为遍历到的值
* 3、不是for in方式遍历,把遍历的数据传给回调,
* 同时指定回调内部的this为遍历到的值
* 4、收集回调的返回结果,如果不为null或undefined,就存储起来,最终一起返回
* */

var i, len, temp, result = [];

if( 'length' in obj ) {
for( i = 0, len = obj.length; i < len; i++ ) {
temp = cbk.call( obj[ i ], i, obj[ i ] );
if( temp != null ) {
result.push( temp );
}
}
}else {
for( i in obj ) {
temp = cbk.call( obj[ i ], i, obj[ i ] );
if( temp != null ) {
result.push( temp );
}
}
}

return result;
}

// 测试
var obj = { name: 'xx', age: 'xxx' };
var arr = [ {val:10}, {val:100}, {val:1000} ];

console.log( map(obj, function (key, val) {

// 收集值为xxx的key
if (val === 'xxx') {
return key;
}
}));

console.log(map(arr, function (index, val) {

// 收集val大于10的对象
if (this.val > 10) {
return this;
}
}));

模拟jquery实现each方法和map方法的更多相关文章

  1. jquery中prop()方法和attr()方法

    接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...

  2. js进阶 12-13 jquery中one方法和trigger方法如何使用

    js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包 ...

  3. jquery中attr方法和prop方法的区别

    关于checked的属性,最重要的概念就是你要记住,它跟checked的状态值是毫无关系的,设置checked = "checked"或者checked = "true& ...

  4. jQuery中bind方法和live方法区别解析

    Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...

  5. jquery中prop()方法和attr()方法的区别浅析

    官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop()这个新方法,不可能没用吧,那什么时候该用attr(),什么时候该用prop()呢 jquery1.6中新加了一个方法pr ...

  6. jquery中prop()方法和attr()方法的区别

    最近在用jquery的时候遇到一个问题,那就是attr()方法,发现这个方法有时候使用会有一些说不出原因的问题.翻翻自己之前笔记发现,还有个函数prop(). 这两个函数都可以用来获取属性. jque ...

  7. jquery中prop()方法和attr()方法的区别(转)

    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了pro ...

  8. jQuery ajax - getScript() 方法和getJSON方法

    实例 使用 AJAX 请求来获得 JSON 数据,并输出结果: $("button").click(function(){ $.getJSON("demo_ajax_js ...

  9. jQuery中hover方法和toggle方法使用指南

    jQuery提供一些方法(如:toggle)将两种事件效果合并到一起,比如:mouseover.mouseout:keyup.keydown等 1.hover函数 hover(over,out)一个模 ...

随机推荐

  1. Unity-Animator深入系列总索引

    花了不少时间完成了这篇Unity Animator学习系列文章,其中大多数内容都来自个人实践,包括API部分很多都是亲测,期望和网上的诸多教程达到互补. 相关参考文档 Unity Animator官方 ...

  2. ubuntu如何以删除文件夹?

    rm [选项] 文件 -f, --force 强力删除,不要求确认 -i 每删除一个文件或进入一个子目录都要求确认 -I 在删除超过三个文件或者递归删除前要求确认 -r, -R 递归删除子目录 -d, ...

  3. 用excel做差异表达

    首先准备数据:表达矩阵 ACC.uncv2.mRNAseq_RSEM_normalized_log2.txt(以下载的TCGA的数据,log之后的) 上面数据中01为tumor,11为normal 我 ...

  4. DSO、CUBE区别(覆盖、合计)

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  5. Js 类定义的几种方式

    提起面向对象我们就能想到类,对象,封装,继承,多态.在<javaScript高级程序设计>(人民邮电出版社,曹力.张欣译.英文名字是:Professional JavaScript for ...

  6. PLS-00221: 'function' 不是过程或尚未定义

    直接调用addOrgunitInfoByBatch(r_user_batch.seq_id,'01');   报错PLS-00221: 'function' 不是过程或尚未定义   原因是在调用函数时 ...

  7. Python中的logging模块

    http://python.jobbole.com/86887/ 最近修改了项目里的logging相关功能,用到了python标准库里的logging模块,在此做一些记录.主要是从官方文档和stack ...

  8. PHP 小方法之 写日志方法

    if(! function_exists ('write_log') ) { function write_log($data, $name='debug', $date=null){ if (is_ ...

  9. JavaEE开发环境搭建(2)---(MySQL的安装)

    上次写了JavaEE开发环境搭建之jdk的安装...然后自己看的时候感觉有时候加载图片不是很流畅,所以这次就少添加点图片了~~ JavaEE开发环境搭建之MySQL的安装 1:mysql 的下载 在百 ...

  10. Asp.Net_单点登录

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...