原生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 相关文章推荐
统计出现最多的字符次数的js代码
Dec 03 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 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
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
js 小数取整的函数
2010/05/10 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
理解javascript模块化
2016/03/28 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
JavaScript实现计数器基础方法
2017/10/10 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python 如何调用远程接口
2020/09/11 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
美国零售商店:Blue&Cream
2017/04/07 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
AJax面试题
2014/11/25 面试题
自主招生推荐信范文
2014/05/10 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
导游欢送词
2015/01/31 职场文书
健康教育主题班会
2015/08/14 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技