实现jQuery.each方法

原创 2017年08月12日 21:25:54

参考JavaScript专题之jQuery通用遍历方法each的实现

$.each是一个通用的迭代函数,可以用来迭代数组与对象。

$.each(arr,function(index,value){
    ……
})

$.each(obj,function(prop,value){
    ……
})

$.each()函数和 $(selector).each()是不一样的,那个是专门用来遍历一个jQuery对象。$.each()函数可用于迭代任何集合,无论是“名/值”对象或数组。

那么我们该怎么实现这样一个 each 方法呢?

首先,我们肯定要根据参数的类型进行判断,如果是数组,就调用 for 循环,如果是对象,就使用 for in 循环。

function each(obj,callback){
    if(Array.isArray(obj)){
        for(var i=0;i<obj.length;i++){
            callback.call(obj[i],i,obj[i]);
        }
    }else{
        for(var prop in obj){
            callbackcall(obj[prop],prop,obj[prop]);
        }
    }
}

使用call调用回调函数是为了保证this的正确指向。

这个函数看起来与原生的forEach方法没有什么区别,但是$.each是支持在回调函数中返回return false来终止循环的。
这里我们也可以通过监测callback返回的值来实现:

function each(obj,callback){
    if(Array.isArray(obj)){
        for(var i=0;i<obj.length;i++){
            if(callback(i,obj[i]) === false){
                break;
            }
        }
    }else{
        for(var prop in obj){
            if(callback(prop,obj[prop]) === false){
                break;
            }
        }
    }
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

原生js实现jq的$.each()方法

jq的$.each()方法: 语法:jQuery.each(object, [callback]) 回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each...
  • sinat_32546159
  • sinat_32546159
  • 2017年09月06日 00:14
  • 826

jQuery.each( object, callback,arg)

jQuery.each( object, callback,arg)each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象、数组的属性值并进行处理。 jQuery和jQue...
  • kevinlifeng
  • kevinlifeng
  • 2011年05月17日 15:34
  • 1692

jQuery.each(){} 方法精讲

jQuery 中的each函数 很方便,$.each ()函数封装了十分强大的遍历功能,它可以遍历一维数组、多维数组、DOM , JSON 等等,在javaScript 开发过程中使用$each可以大...
  • honglei_zh
  • honglei_zh
  • 2012年11月20日 16:05
  • 780

jQuery.each

jQuery.each( collection, callback(indexInArray, valueOfElement) )返回: Object 描述: 一个通用的迭代函数,它可以用来...
  • wuyou1336
  • wuyou1336
  • 2017年05月11日 23:55
  • 154

jQuery中的each方法实例

jQuery中的each方法实例
  • u012345283
  • u012345283
  • 2014年10月21日 23:56
  • 2028

jQuery.each方法,内部使用代码

今天看了jQuery.each的源码,突然发现里面包含了一个只供自己内部使用的代码,感觉很新奇,就记下来。 不过我本身并不准备经常用这个东西,因为很有可能会和普通的用法搞混。。。上代码: // a...
  • zeyu1021
  • zeyu1021
  • 2015年05月05日 16:18
  • 492

jQuery.each()与each()

jQuery.each( array, callback )Returns: Object Description: A generic iterator function, which can ...
  • lgh06
  • lgh06
  • 2015年02月19日 15:33
  • 534

jQuery.each() learn and conclusion

jQuery.each( collection, callback(indexInArray, valueOfElement) )Returns: ObjectDescription: A gener...
  • sunboy_2050
  • sunboy_2050
  • 2010年09月03日 13:47
  • 3514

jQuery.each()函数(译)

http://www.sitepoint.com/jquery-each-function-examples/ 原文地址 jQuery 的each()函数是一个相当重要的扩展。这个函数是一个jQ...
  • FrontEnder_way
  • FrontEnder_way
  • 2016年01月26日 18:46
  • 472

jquery.each return false 问题

在做需求的时候,用到了jquery.each循环,对循环遍历的值进行判断,不符合条件的,return false,给出提示,但是遇到的情况是,return false 后,还能继续执行,都走了后台,感...
  • qingzhongren
  • qingzhongren
  • 2016年09月11日 12:08
  • 3827
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现jQuery.each方法
举报原因:
原因补充:

(最多只允许输入30个字)