原生js实现each方法实例代码详解


Posted in Javascript onMay 27, 2019

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);
});

输出如下:

原生js实现each方法实例代码详解 

对象类型

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

输出如下:

原生js实现each方法实例代码详解 

类数组类型

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

输出如下:

原生js实现each方法实例代码详解 

增加中断条件

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);
});

输出如下:

原生js实现each方法实例代码详解 

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

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

另推荐个表格组件 gridManager

总结

以上所述是小编给大家介绍的原生js实现each方法实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
JS继承用法实例分析
Feb 05 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
angular 服务随记小结
May 06 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
深入学习JavaScript中的bom
May 27 #Javascript
Vue实现根据hash高亮选项卡
May 27 #Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 #Javascript
Vue使用localStorage存储数据的方法
May 27 #Javascript
了解javascript中的Dom操作
May 27 #Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 #Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 #Javascript
You might like
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
python中logging包的使用总结
2018/02/28 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
护士实习鉴定范文
2013/12/22 职场文书
销售人员工作自我评价
2014/09/21 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
培训计划通知
2015/07/15 职场文书
村主任当选感言
2015/08/01 职场文书
竞选稿之小学班干部
2019/10/31 职场文书