资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JavaScript专题之jQuery通用遍历方法each的实现

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

blankyao / 2069人阅读

摘要：语法为回调函数拥有两个参数第一个为对象的成员或数组的索引，第二个为对应变量或内容。但是对于的函数，如果需要退出循环可使回调函数返回，其它返回值将被忽略。

</>复制代码 
  1. JavaScript 专题系列第十一篇，讲解 jQuery 通用遍历方法 each 的实现
each介绍

jQuery 的 each 方法，作为一个通用遍历方法，可用于遍历对象和数组。

语法为：

</>复制代码 
  1. jQuery.each(object, [callback])

回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。

</>复制代码 
  1. // 遍历数组
  2. $.each( [0,1,2], function(i, n){
  3.     console.log( "Item #" + i + ": " + n );
  4. });
  5. // Item #0: 0
  6. // Item #1: 1
  7. // Item #2: 2
</>复制代码 
  1. // 遍历对象
  2. $.each({ name: "John", lang: "JS" }, function(i, n) {
  3.     console.log("Name: " + i + ", Value: " + n);
  4. });
  5. // Name: name, Value: John
  6. // Name: lang, Value: JS
退出循环

尽管 ES5 提供了 forEach 方法，但是 forEach 没有办法中止或者跳出 forEach 循环，除了抛出一个异常。但是对于 jQuery 的 each 函数，如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

</>复制代码 
  1. $.each( [0, 1, 2, 3, 4, 5], function(i, n){
  2.     if (i > 2) return false;
  3.     console.log( "Item #" + i + ": " + n );
  4. });
  5. // Item #0: 0
  6. // Item #1: 1
  7. // Item #2: 2
第一版

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

首先，我们肯定要根据参数的类型进行判断，如果是数组，就调用 for 循环，如果是对象，就使用 for in 循环，有一个例外是类数组对象，对于类数组对象，我们依然可以使用 for 循环。

更多关于类数组对象的知识，我们可以查看《JavaScript专题之类数组对象与arguments》

那么又该如何判断类数组对象和数组呢？实际上，我们在《JavaScript专题之类型判断(下)》就讲过jQuery 数组和类数组对象判断函数 isArrayLike 的实现。

所以，我们可以轻松写出第一版：

</>复制代码 
  1. // 第一版
  2. function each(obj, callback) {
  3.     var length, i = 0;
  4.     if ( isArrayLike(obj) ) {
  5.         length = obj.length;
  6.         for ( ; i < length; i++ ) {
  7.             callback(i, obj[i])
  8.         }
  9.     } else {
  10.         for ( i in obj ) {
  11.             callback(i, obj[i])
  12.         }
  13.     }
  14.     return obj;
  15. }
中止循环

现在已经可以遍历对象和数组了，但是依然有一个效果没有实现，就是中止循环，按照 jQuery each 的实现，当回调函数返回 false 的时候，我们就中止循环。这个实现起来也很简单：

我们只用把：

</>复制代码 
  1. callback(i, obj[i])

替换成：

</>复制代码 
  1. if (callback(i, obj[i]) === false) {
  2.     break;
  3. }

轻松实现中止循环的功能。

this

我们在实际的开发中，我们有时会在 callback 函数中用到 this，先举个不怎么恰当的例子：

</>复制代码 
  1. // 我们给每个人添加一个 age 属性，age 的值为 18 + index
  2. var person = [
  3.     {name: "kevin"},
  4.     {name: "daisy"}
  5. ]
  6. $.each(person, function(index, item){
  7.     this.age = 18 + index;
  8. })
  9. console.log(person)

这个时候，我们就希望 this 能指向当前遍历的元素，然后给每个元素添加 age 属性。

指定 this，我们可以使用 call 或者 apply，其实也很简单：

我们把：

</>复制代码 
  1. if (callback(i, obj[i]) === false) {
  2.     break;
  3. }

替换成：

</>复制代码 
  1. if (callback.call(obj[i], i, obj[i]) === false) {
  2.     break;
  3. }

关于 this，我们再举个常用的例子：

</>复制代码 
  1. $.each($("p"), function(){
  2.    $(this).hover(function(){ ... });
  3. })

虽然我们经常会这样写：

</>复制代码 
  1. $("p").each(function(){
  2.     $(this).hover(function(){ ... });
  3. })

但是因为 $("p").each() 方法是定义在 jQuery 函数的 prototype 对象上面的，而 $.data()方法是定义 jQuery 函数上面的，调用的时候不从复杂的 jQuery 对象上调用，速度快得多。所以我们推荐使用第一种写法。

回到第一种写法上，就是因为将 this 指向了当前 DOM 元素，我们才能使用 $(this)将当前 DOM 元素包装成 jQuery 对象，优雅的使用 hover 方法。

所以最终的 each 源码为：

</>复制代码 
  1. function each(obj, callback) {
  2.     var length, i = 0;
  3.     if (isArrayLike(obj)) {
  4.         length = obj.length;
  5.         for (; i < length; i++) {
  6.             if (callback.call(obj[i], i, obj[i]) === false) {
  7.                 break;
  8.             }
  9.         }
  10.     } else {
  11.         for (i in obj) {
  12.             if (callback.call(obj[i], i, obj[i]) === false) {
  13.                 break;
  14.             }
  15.         }
  16.     }
  17.     return obj;
  18. }
性能比较

我们在性能上比较下 for 循环和 each 函数：

</>复制代码 
  1. var arr = Array.from({length: 1000000}, (v, i) => i);
  2. console.time("for")
  3. var i = 0;
  4. for (; i < arr.length; i++) {
  5.     i += arr[i];
  6. }
  7. console.timeEnd("for")
  8. console.time("each")
  9. var j = 0;
  10. $.each(arr, function(index, item){
  11.     j += item;
  12. })
  13. console.timeEnd("each")

这里显示一次运算的结果：

从上图可以看出，for 循环的性能是明显好于 each 函数的，each 函数本质上也是用的 for 循环，到底是慢在了哪里呢？

我们再看一个例子：

</>复制代码 
  1. function each(obj, callback) {
  2.     var i = 0;
  3.     var length = obj.length
  4.     for (; i < length; i++) {
  5.         value = callback(i, obj[i]);
  6.     }
  7. }
  8. function eachWithCall(obj, callback) {
  9.     var i = 0;
  10.     var length = obj.length
  11.     for (; i < length; i++) {
  12.         value = callback.call(obj[i], i, obj[i]);
  13.     }
  14. }
  15. var arr = Array.from({length: 1000000}, (v, i) => i);
  16. console.time("each")
  17. var i = 0;
  18. each(arr, function(index, item){
  19.     i += item;
  20. })
  21. console.timeEnd("each")
  22. console.time("eachWithCall")
  23. var j = 0;
  24. eachWithCall(arr, function(index, item){
  25.     j += item;
  26. })
  27. console.timeEnd("eachWithCall")

这里显示一次运算的结果：

each 函数和 eachWithCall 函数唯一的区别就是 eachWithCall 调用了 call，从结果我们可以推测出，call 会导致性能损失，但也正是 call 的存在，我们才能将 this 指向循环中当前的元素。

有舍有得吧。

专题系列

JavaScript专题系列目录地址：https://github.com/mqyqingfeng/Blog。

JavaScript专题系列预计写二十篇左右，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里、递归、乱序、排序等，特点是研(chao)究(xi) underscore 和 jQuery 的实现方式。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

GPU云服务器 云服务器 javascript实现方法 jquery each javascript专题系列 html实现图的遍历

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84603.html

相关文章

  • JavaScript专题系列文章

    摘要：专题系列共计篇，主要研究日常开发中一些功能点的实现，比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等，特点是研究专题之函数组合专题系列第十六篇，讲解函数组合，并且使用柯里化和函数组合实现模式需求我们需要写一个函数，输入，返回。 JavaScript 专题之从零实现 jQuery 的 extend JavaScritp 专题系列第七篇，讲解如何从零实现一个 jQuery 的 ext...

    Maxiye 评论0 收藏0

  • JavaScript专题系列20篇正式完结！

    摘要：写在前面专题系列是我写的第二个系列，第一个系列是深入系列。专题系列自月日发布第一篇文章，到月日发布最后一篇，感谢各位朋友的收藏点赞，鼓励指正。 写在前面 JavaScript 专题系列是我写的第二个系列，第一个系列是 JavaScript 深入系列。 JavaScript 专题系列共计 20 篇，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里...

    sixleaves 评论0 收藏0

  • underscore 系列之如何写自己的 underscore

    摘要：因为在微信小程序中，和都是，加上又强制使用严格模式，为，挂载就会发生错误，所以就有人又发了一个，代码变成了这就是现在的样子。 前言 在 《JavaScript 专题系列》 中，我们写了很多的功能函数，比如防抖、节流、去重、类型判断、扁平数组、深浅拷贝、查找数组元素、通用遍历、柯里化、函数组合、函数记忆、乱序等，可以我们该如何组织这些函数，形成自己的一个工具函数库呢？这个时候，我们就要借...

    Invoker 评论0 收藏0

  • JavaScript专题之函数柯里化

    摘要：一个经常会看到的函数的实现为第一版我们可以这样使用或者或者已经有柯里化的感觉了，但是还没有达到要求，不过我们可以把这个函数用作辅助函数，帮助我们写真正的函数。 JavaScript 专题系列第十三篇，讲解函数柯里化以及如何实现一个 curry 函数 定义 维基百科中对柯里化 (Currying) 的定义为： In mathematics and computer science, cu...

    zhangfaliang 评论0 收藏0

  • 2017-08-03 前端日报

    摘要：前端日报精选专题之通用遍历方法的实现深入了解的子组件上最流行的项目再聊移动端页面的适配译盒子模型实践教程中文全栈第天数据驱动龙云全栈译年开发趋势疯狂的技术宅在翻译译闭包并不神秘前端心得拼多多前端笔试个人文章容器技术方 2017-08-03 前端日报 精选 JavaScript专题之jQuery通用遍历方法each的实现深入了解React的子组件GitHub上最流行的Top 10 Jav...

    gecko23 评论0 收藏0

发表评论

登陆后可评论

0条评论

blankyao

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<