- 浏览: 303753 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (243)
- Core Java (13)
- Java (12)
- Android (2)
- Lucene (3)
- J2EE (3)
- Hibernate (2)
- Jsp & Servlet (3)
- Struts2 (3)
- Spring (5)
- JSF (6)
- RichFaces (2)
- HTML & JS & DOM & CSS (87)
- browser (1)
- Ajax & A4J (2)
- Workflow (1)
- Maven (3)
- Linux (2)
- VM & VBOX (1)
- Tomcat (1)
- Cache (3)
- Others (36)
- design (1)
- PHP (1)
- Try.js (1)
- HTML5 && CSS3 && ECMAScript5 (26)
- 疯言疯语 (5)
- mongodb (2)
- Hardware Common Sence (1)
- RESTful (3)
- Nginx (2)
- web安全 (8)
- Page Design (1)
- web performance (1)
- nodejs (4)
- python (1)
最新评论
-
New_Mao_Er:
求最新的版本破解啊!!!
Omondo eclipseUML插件破解 -
konglx:
讲得仔细,谢了
全面分析 Spring 的编程式事务管理及声明式事务管理 -
cilendeng:
对所有post有效只能使用过滤器
说说Tomcat的Server.xml的URIEncoding=‘UTF-8’配置 -
jiulingchen:
mark了,灰常感谢!
JAVA中最方便的Unicode转换方法 -
anlaetion:
这算法可以有
js 字符串搜索算法
循环遍历一个元素是开发中最常见的需求之一,那么让我们来看一个由框架BASE2和Jquery的结合版本吧.
01 |
var forEach = ( function (){
|
02 |
//数组与伪数组的遍历
|
03 |
var _Array_forEach = function (array, block, context) {
|
04 |
if (array == null ) return ;
|
05 |
//对String进行特殊处理
|
06 |
if ( typeof array == 'string' ){
|
07 |
array = array.split( '' );
|
08 |
}
|
09 |
var i = 0,length = array.length;
|
10 |
for (;i < length && block.call(context, array[i], (i+1), array)!== false ; i++) {}
|
11 |
};
|
12 |
//对象的遍历
|
13 |
var _Function_forEach = function (object, block, context) {
|
14 |
for ( var key in object) {
|
15 |
//只遍历本地属性
|
16 |
if (object.hasOwnProperty(key)&&block.call(context, object[key], key, object)=== false ){
|
17 |
break ;
|
18 |
}
|
19 |
}
|
20 |
};
|
21 |
return function (object, block, context){
|
22 |
if (object == null ) return ;
|
23 |
if ( typeof object.length == "number" ) {
|
24 |
_Array_forEach(object, block, context);
|
25 |
} else {
|
26 |
_Function_forEach(object, block, context);
|
27 |
}
|
28 |
};
|
29 |
})() |
函数本身并不复杂,但很精巧。加了一些简单的注释,想信大家能看懂。
来看一点例子
01 |
//1:1 \n 2:2 |
02 |
forEach([1,2,3,4,5], function (el,index){
|
03 |
if (index>2){
|
04 |
return false ;
|
05 |
}
|
06 |
alert(index+ ":" +el);
|
07 |
}); |
08 |
09 |
function print(el,index){
|
10 |
alert(index+ ":" +el);
|
11 |
} |
12 |
//a:a \n b:b \n c:c |
13 |
forEach({a: 'a' ,b: 'b' ,c: 'c' },print);
|
14 |
15 |
//1:笨 \n 2:蛋 \n 3:的 \n 4:座 \n 5:右 \n 6:铭 |
16 |
forEach( "笨蛋的座右铭" ,print);
|
17 |
|
18 |
function Person(name, age) {
|
19 |
this .name = name || "" ;
|
20 |
this .age = age || 0;
|
21 |
}; |
22 |
Person.prototype = new Person;
|
23 |
var fred = new Person( "笨蛋的座右铭" , 25);
|
24 |
fred.language = "chinese" ; //极晚绑定
|
25 |
//name:jxl \n age:22 \n language:chinese |
26 |
forEach(fred,print); |
注:回调函数中的index参数下标从1开始
为什么不用内置的forEach
和getElementsByClassName一样,内置的forEach效率很高,但是在功能上有局限性,它无法在循环中途退出。而在我们这个forEach中,它可以在处理函数内通过返回false的方式退出循环,更加的灵活。
特别的length属性
length属性是一个很特别的属性,看到数组,大家一定会想到length,那看到带有length属性的对象呢?那大家一定要想到伪数组(类数组)。那什么是伪数组呢?简单的理解就是能通过Array.prototype.slice转换为真正的数组的带有length属性的对象。javascript最为著名的伪数组就是arguments对象。关于伪数组有很多东西,以后我会专门写一篇博文讲这个东西。大家只要记住:不要随便给对象赋予length属性,除非你明确的知道,你准备把它当作伪数组来使用。
我想这个函数是一个简单javascript工具库中的必备函数,它是金字塔的根基,在它的基础上,进行再封装,可以让你的库更强大,更加美丽!
发表评论
-
循环数组的逻辑怎么写
2015-03-23 10:24 609应用场景这样的: var imgUrls = [ ... -
发布`代码生成器`
2014-11-17 00:45 548闲话不说,直接上地址 npm: https://www. ... -
MutationObserver
2014-10-27 15:29 1060MutationObserver MutationObse ... -
a simple mvvm library - bird
2014-10-09 18:26 690see here:https://github.com/i ... -
遍历dom tree是一件相当耗时的事情
2014-09-23 01:15 697遍历dom tree是一件相当耗时的事情,尤其是在遍历的同时 ... -
今天再讲下js里的继承
2014-09-18 00:27 655js的继承说简单也很简单,请看: function ... -
Text 类型
2014-09-05 18:52 797文本节点由Text类型表 ... -
JavaScript插入动态脚本
2014-09-05 18:47 598动态脚本指的是在页面加载时不存在,但将来的某一时刻通过修改该 ... -
innerHTML插入<style>元素
2014-09-05 18:37 1101通过innerHTML写入<style>元素没 ... -
CSS实现相对浏览器窗口定位彻底研究
2014-09-05 18:33 3655Web Developer / Designer 经常需要将 ... -
JavaScript插入动态样式
2014-09-05 18:07 564能够把CSS样式包含到HTML页面中的元素有两个。其中,& ... -
再理解jQuery;delete原型属性
2014-05-13 22:05 1811以前用jQuery的时候曾粗略看了它的源码,但却不求甚解。 ... -
javascript &&和||
2012-07-23 00:38 675一直以为 && 和 || ... -
undefined 和 void 0 的区别
2012-07-20 11:15 674在读backbone源码时看见这么一段代码: if ( ... -
Fiddler - 前端开发值得拥有
2012-07-16 14:41 786最近换了新工作,搬了新家,换了新室友,一切都在重新开始。 ... -
说说我的web前端之路,分享些前端的好书
2012-07-16 14:38 757WEB前端研发工程师,在国内算是一个朝阳职业,这个领域没 ... -
JavaScript实现 页面滚动图片加载
2012-07-16 14:29 643又到了这个月的博客时间了,原计划是打算在这个月做一个的功 ... -
JavaScript 操作 Cookie
2012-07-16 11:18 646从事web开发也有些日 ... -
Javascript定义类(class)的三种方法
2012-07-12 12:35 559程序员们做了很多探索,研究如何用Javascript模拟”类” ... -
服务端解决跨源共享
2012-06-21 10:18 4488跨源资源共享是web开发领域中一个非常有趣的话题,互联网 ...
相关推荐
本篇文章主要介绍了Javascript 数组循环遍历之forEach详解,对学习forEach有很好的帮助,有需要的可以了解一下。
循环遍历一个元素是开发中最常见的需求之一,那么让我们来看一个由框架BASE2和Jquery的结合版本吧. var forEach = (function(){ //数组与伪数组的遍历 var _Array_forEach = function (array, block, context) { ...
这篇文章来回答javascript通用循环遍历方法forEach中最后提到的关于伪数组的问题。 什么是伪数组 能通过Array.prototype.slice转换为真正的数组的带有length属性的对象。 这种对象有很多,比较特别的是arguments对象...
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍_.docx
低版本IE数组和HTMLCollection元素集合不兼容forEach循环遍历的处理方法 原生JavaScript通过name获取dom元素得到的是 HTMLCollection元素集合 要想循环遍历可以用forEach,但是在低于ie9的版本下不兼容 var list...
MongoDB数据库forEach语句循环遍历功能是非常常用的一个功能。 采用foreach循环遍历,并每次循环允许执行一次回调函数。 此外,foreach循环遍历是for循环的一种扩展,对比同浏览器端的forEach用法是一致的。 示例如下...
主要介绍了详解vue数组遍历方法forEach和map的原理解析和实际应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
具体来说,它定义了一个包含三个水果名称的数组$fruits,然后使用foreach循环遍历这个数组,并将每个元素赋值给变量$fruit。在每次循环中,我们使用echo语句输出当前元素的值,并在其后面添加一个换行符" "。最后...
具体来说,它定义了一个包含三个水果名称的数组$fruits,然后使用foreach循环遍历这个数组,并将每个元素赋值给变量$fruit。在每次循环中,我们使用echo语句输出当前元素的值,并在其后面添加一个换行符" "。最后...
主要介绍了全面解析JavaScript里的循环方法之forEach,for-in,for-of的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
主要介绍了JavaScript forEach()遍历函数使用及介绍,本文讲解了使用forEach遍历数组的用法以及提前终止循环的一个方法技巧,需要的朋友可以参考下
计算机后端-Java-Java核心基础-第24章 集合01 12. 新特性foreach循环遍历集合或数组.avi
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文主要给大家介绍了关于C#中foreach遍历的用法以及c#使用foreach需要知道的一些事,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 一、C#中foreach遍历用法 foreach循环用于列举出集合中所有的...
主要介绍了JavaScript遍历数组的三种方法map、forEach与filter,结合实例形式详细分析了javascript针对数组遍历的map、forEach与filter三种方法相关操作技巧与注意事项,需要的朋友可以参考下
总结JavaScript中的循环遍历 定义一个数组和对象 const arr = ['a', 'b', 'c', 'd', 'e', 'f']; const obj = { a: 1, b: 2, c: 3, d: 4 } for() 经常用来遍历数组元素 遍历值为数组元素索引 for (let i = 0; ...
利用foreach循环显示数组所有元素,对foreach循环进行更深了解