模拟jquery实现each方法和map方法
********************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方法的更多相关文章
- jquery中prop()方法和attr()方法
接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...
- js进阶 12-13 jquery中one方法和trigger方法如何使用
js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包 ...
- jquery中attr方法和prop方法的区别
关于checked的属性,最重要的概念就是你要记住,它跟checked的状态值是毫无关系的,设置checked = "checked"或者checked = "true& ...
- jQuery中bind方法和live方法区别解析
Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...
- jquery中prop()方法和attr()方法的区别浅析
官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop()这个新方法,不可能没用吧,那什么时候该用attr(),什么时候该用prop()呢 jquery1.6中新加了一个方法pr ...
- jquery中prop()方法和attr()方法的区别
最近在用jquery的时候遇到一个问题,那就是attr()方法,发现这个方法有时候使用会有一些说不出原因的问题.翻翻自己之前笔记发现,还有个函数prop(). 这两个函数都可以用来获取属性. jque ...
- jquery中prop()方法和attr()方法的区别(转)
jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了pro ...
- jQuery ajax - getScript() 方法和getJSON方法
实例 使用 AJAX 请求来获得 JSON 数据,并输出结果: $("button").click(function(){ $.getJSON("demo_ajax_js ...
- jQuery中hover方法和toggle方法使用指南
jQuery提供一些方法(如:toggle)将两种事件效果合并到一起,比如:mouseover.mouseout:keyup.keydown等 1.hover函数 hover(over,out)一个模 ...
随机推荐
- toStirng()与Object.prototype.toString.call()方法浅谈
一.toString()是一个怎样的方法?它是能将某一个值转化为字符串的方法.然而它是如何将一个值从一种类型转化为字符串类型的呢? 通过下面几个例子,我们便能获得答案: 1.将boolean类型的值转 ...
- printk函数日志级别的设置【转】
本文转载自: 下面执行cat /proc/sys/kernel/printk 打印出的四个数字分别代表: 控制台日志级别.默认的消息日志级别.最低的控制台日志级别和默认的控制台日志级别 只有当prin ...
- Dynamics AX 2012 R3 Demo 安装与配置 - 配置安装环境 (Step 1)
AX 2012 R3 发布后,Reinhard一直想体验一把,可是Reinhard所在的公司暂时不会升级到R3版本.这不,Reinhard就打算在个人电脑上安装下,可是安装的过程中,遇到了很多问题,R ...
- 关于mysql中int(1)中int后面的数字
mysql在建表的时候int类型后的长度代表什么? 是该列允许存储值的最大宽度吗? 为什么我设置成int(1), 也一样能存10,100,1000呢. 当时我虽然知道int(1),这个长度1并不代表 ...
- Sharepoint2013切换用户菜单
Sharepoint2013中没有切换用户的菜单,每次登录后,浏览器就会记住密码.要重新换一个用户登录的时候,就需要把浏览器都关闭,然后重新启动.这样非常不方便.特别是在测试权限这一块的时 ...
- mac攻略(二) -- 简单配置php开发环境
最简单直接的方式还是使用 Mac 上自带的 Apache 和 PHP. 1.启动 Apache 1>启动apache $sudo apachectl start; 2>启动后,在浏览器 ...
- 【Unity基础知识之三】Unity Assets目录下的特殊文件夹名称
Unity3D的特殊目录名称 Unity预留了一些目录名称,这些目录有着特殊的含义.比较重要的有: Resources这个目录下的所有文件都会被打包到发布版本中,程序可以通过文件路径来访问它们.这 ...
- 如何很好的使用Linq的Distinct方法
Person1: Id=1, Name="Test1" Person2: Id=1, Name="Test1" Person3: Id=2, Name=&quo ...
- sublime text3 快捷方式汇总
sublime text. 用过的都给赞, 哈哈-- 下面是快捷方式汇总啦: 选择类: Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本. Alt+F3 选中文本按下快捷键,即可一次 ...
- python中Scikit-Learn机器学习模块
Scikit-Learn是基于python的机器学习模块,基于BSD开源许可证.这个项目最早由DavidCournapeau 在2007 年发起的,目前也是由社区自愿者进行维护. Scikit-Lea ...