原生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
jquery里的正则表达式说明
Aug 03 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
JavaScript中的继承之类继承
May 01 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
实例讲解JS中pop使用方法
Jan 27 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
python简单读取大文件的方法
2016/07/01 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
学生感冒英文请假条
2014/02/04 职场文书
实习生求职自荐信
2014/02/07 职场文书
读书小明星事迹材料
2014/05/03 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS