原生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 相关文章推荐
JavaScript 继承详解(四)
Jul 13 Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
vue.js todolist实现代码
Oct 29 Javascript
小程序实现发表评论功能
Jul 06 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
详解JavaScript自定义函数
Jul 29 Javascript
基于Cesium绘制抛物弧线
Nov 18 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
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
python相似模块用例
2016/03/04 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python实现图片处理和特征提取详解
2017/11/13 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
python生成密码字典的方法
2018/07/06 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
Python with语句和过程抽取思想
2019/12/23 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
Python创建临时文件和文件夹
2020/08/05 Python
了解一下python内建模块collections
2020/09/07 Python
简历自我评价怎么写呢?
2014/01/06 职场文书
高中生职业规划范文
2014/03/09 职场文书
心理咨询承诺书
2014/05/20 职场文书
合作协议书模板2014
2014/09/26 职场文书
教育教学读书笔记
2015/07/02 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android