原生js实现each方法

wh469012917 发布于2019-08-26 13:55 / 968人阅读

摘要：里面有个方法，将循环操作简化便捷。随后出了个方法，两个虽然用法相近，但是不能处理对象类型。且无法通过达到效果。在不使用的方法时，该如何处理或者说用原生如何来实现前些前写了个类库其中就实现了该方法。

jquery里面有个each方法，将循环操作简化、便捷。
随后es出了个forEach方法，两个虽然用法相近，但是不能处理对象类型。且无法通过return true达到continue效果。
此外还有个every方法，该方法虽然可以实现continue效果，但是在处理类数组与对象类型时，完全无用。

在不使用jquery的each方法时，该如何处理；或者说用原生如何来实现？
前些前写了个类库: jTool, 其中就实现了该方法。

简单实现:

// 通过字面量方式实现的函数each
var each =  function(object, callback){
  var type = (function(){
          switch (object.constructor){
            case Object:
                return "Object";
                break;
            case Array:
                return "Array";
                break;
            case NodeList:
                return "NodeList";
                break;
            default:
                return "null";
                break;
        }
    })();
    // 为数组或类数组时, 返回: index, value
    if(type === "Array" || type === "NodeList"){
        // 由于存在类数组NodeList, 所以不能直接调用every方法
        [].every.call(object, function(v, i){
            return callback.call(v, i, v) === false ? false : true;
        });
    }
    // 为对象格式时,返回:key, value
    else if(type === "Object"){
        for(var i in object){
            if(callback.call(object[i], i, object[i]) === false){
                break;
            }
        }
    }
}

我们来try一下，测试下数组、对象、类数组类型及中断效果 数组类型

var _array = [1,2,3,4];
each(_array, function(i, v){
  console.log(i + ": " + v);
});

输出如下:

对象类型

var object = {a:1, b:2, c:3}
each(object, function(i, v){
console.log(i + ": " + v);
});
输出如下:

类数组类型

var ele = document.querySelectorAll("div");
each(ele, function(i, v){
  console.log(i + ": " + v);
});

输出如下:

增加中断条件

var object2 = {name:"baukh", age: "29", six:"男", url: "www.lovejavascript.com",}
each(object2, function(i, v){
  if(i === "age"){ //如果存在键值为age的属性时，则输出警告，用于实现continue效果
    console.log("存在键值为age，这家伙已经"+v+"岁了");
    return true;
  }
  if(i === "six" && v === "男"){//如果存在键值为age的属性时，则输出跳出，用于实现break效果
    console.log("存在键值为six,是个男的，不用关注了~");
    return false;
  }
  console.log(i + ": " + v);
});

输出如下:

从结果可以看出来，each方法已经实现了jquery的each功能。且实现如此简单~

随笔一行
这是前端最好的时代，这也是前端最坏的时代。众多前端框架满天飞，随着 jQuery 在前端行业的慢慢弱化，总是会有一种斯人远去，何者慰籍的感觉。互勉吧，各位。

另推荐个表格组件gridManager

混合云超融合服务器原生js实现 ajax原生js实现原生js实现addclass 原生js实现ajax

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

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

原生js实现on与off 方法

摘要：所以仅对参数进行了处理，功能上没有实现子选择器事件触发后执行的函数指定事件是否在捕获或冒泡阶段执行事件句柄在捕获阶段执行默认。使用过jQuery的同学，应该对事件绑定方法 .on() .off() 有一定的了解。在个人类库jTool 中实现了这两个方法，这里就来细说下原生实现方式。实现方式以下为个人类库jTool 中 Event 实现方式。代码中使用到一个基础方法对象utili...

tanglijun 2019-08-26 13:54 评论0 收藏0
解释一下为什么我很少jQuery

摘要：为什么有一个东西，叫，它是一个快速轻量级跨平台的框架。同时，它也是这个世界上最轻量级的框架没有之一它有多快如下我们在里引入比上面更快的方法是什么没有代码是的，就是没有代码，因为实在太强了，以至于所有的浏览器在年前内置了它。这里声明一下，这不是反jQuery的文章，jQuery作为一个js库给大家的项目开发带来很多便利，但有时候仔细想想，我们真的需要jQuery吗？一年前的lpisme...

happyhuangjinjin 2019-08-21 11:30 评论0 收藏0
Zepto核心模块之工具方法拾遗

摘要：举例需要注意的是，此时回调函数中的指向的就是数组或者对象的某一项。中提供的拷贝方法，默认为浅拷贝，如果第一个参数为布尔值则表示深拷贝。前言平时开发过程中经常会用类似each、map、forEach之类的方法，Zepto本身也把这些方法挂载到$函数身上，作为静态方法存在，既可以给Zepto的实例使用，也能给普通的js对象使用。今天我们主要针对其提供的这些api做一些源码实现分析。源...

Alex 2019-08-20 19:04 评论0 收藏0
Zepto核心模块之工具方法拾遗

摘要：举例需要注意的是，此时回调函数中的指向的就是数组或者对象的某一项。中提供的拷贝方法，默认为浅拷贝，如果第一个参数为布尔值则表示深拷贝。前言平时开发过程中经常会用类似each、map、forEach之类的方法，Zepto本身也把这些方法挂载到$函数身上，作为静态方法存在，既可以给Zepto的实例使用，也能给普通的js对象使用。今天我们主要针对其提供的这些api做一些源码实现分析。源...

lcodecorex 2019-08-01 17:31 评论0 收藏0