javascript forEach通用循环遍历方法

代码如下:

var forEach = (function(){
//数组与伪数组的遍历
var _Array_forEach = function (array, block, context) {
if (array == null) return;
//对String进行特殊处理
if(typeof array == 'string'){
array = array.split('');
}
var i = 0,length = array.length;
for (;i < length && block.call(context, array[i], (i+1), array)!==false; i++) {}
};
//对象的遍历
var _Function_forEach = function (object, block, context) {
for (var key in object) {
//只遍历本地属性
if (object.hasOwnProperty(key)&&block.call(context, object[key], key, object)===false){
break;
}
}
};
return function(object, block, context){
if (object == null) return;
if (typeof object.length == "number") {
_Array_forEach(object, block, context);
}else{
_Function_forEach(object, block, context);
}
};
})()

函数本身并不复杂，但很精巧。加了一些简单的注释，想信大家能看懂。
来看一点例子


代码如下:

//1:1 \n 2:2
forEach([1,2,3,4,5],function(el,index){
if(index>2){
return false;
}
alert(index+":"+el);
});
function print(el,index){
alert(index+":"+el);
}
//a:a \n b:b \n c:c
forEach({a:'a',b:'b',c:'c'},print);
//1:笨 \n 2:蛋 \n 3:的 \n 4:座 \n 5:右 \n 6:铭
forEach("笨蛋的座右铭",print);
function Person(name, age) {
this.name = name || "";
this.age = age || 0;
};
Person.prototype = new Person;
var fred = new Person("jxl", 22);
fred.language = "chinese";//极晚绑定
//name:jxl \n age:22 \n language:chinese
forEach(fred,print);

注：回调函数中的index参数下标从1开始
为什么不用内置的forEach
和getElementsByClassName一样，内置的forEach效率很高，但是在功能上有局限性，它无法在循环中途退出。而在我们这个forEach中，它可以在处理函数内通过返回false的方式退出循环，更加的灵活。
特别的length属性
length属性是一个很特别的属性，看到数组，大家一定会想到length,那看到带有length属性的对象呢？那大家一定要想到伪数组(类数组)。那什么是伪数组呢？简单的理解就是能通过Array.prototype.slice转换为真正的数组的带有length属性的对象。javascript最为著名的伪数组就是arguments对象。关于伪数组有很多东西，以后我会专门写一篇博文讲这个东西。大家只要记住:不要随便给对象赋予length属性，除非你明确的知道，你准备把它当作伪数组来使用。
我想这个函数是一个简单javascript工具库中的必备函数,它是金字塔的根基，在它的基础上，进行再封装，可以让你的库更强大,更加美丽!

赞 (0)

相关推荐

  • 详解JavaScript中的forEach()方法的使用

    JavaScript数组的 forEach()方法调用数组中的每个元素. 语法 array.forEach(callback[, thisObject]); 下面是参数的详细信息: callback : 函数测试数组的每个元素. thisObject : 对象作为该执行回调时使用. 返回值: 返回创建数组. 兼容性: 这种方法是一个JavaScript扩展到ECMA-262标准;因此它可能不存在在标准的其他实现.为了使它工作,你需要添加下面的脚本代码的顶部: if (!Array.prototy

  • JavaScript forEach()遍历函数使用及介绍

    forEach()函数从头到尾把数组遍历一遍.有三个参数分别是:数组元素,元素的索引,数组本身(如果是一个参数就是数组元素,也就是数组的值. var data=[1,2,3,4,5,6]; var sum=0; data.forEach(function(v){//其中的v就是数组的值 123456 sum+=v;}) document.write(sum+"<br>");//打印出来是21 data.forEach(function(o,p,q){//分别对应:数组元素,

  • Javascript数组循环遍历之forEach详解

    1.js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了. 除此之外,也可以使用较简便的forEach 方式 2.forEach函数. Firefox 和Chrome 的Array 类型都有forEach的函数.使用如下: <!--Add by oscar999--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> &l

  • 关于JavaScript中forEach和each用法浅析

    本文主要给大家介绍了关于JavaScript中forEach和each的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: forEach是ES5中操作数组的一种方法,主要功能是遍历数组,例如: var arr = [1,2,3,4]; arr.forEach(alert); 等价于: var arr = [1, 2, 3, 4]; for (var k = 0, length = arr.length; k < length; k++) { alert(array[k]);

  • js中的for如何实现foreach中的遍历

    js中没有foreach这个关键字,但是可以用var v in array来实现遍历.但是需要注意的是, 拿到的是key而不是value.看例子: 复制代码 代码如下: <script type="text/javascript"> // 普通数组 var intArray = new Array(); intArray[0] = "第一个"; intArray[1] = "第二个"; for(var i = 0; i<intA

  • node.js中的forEach()是同步还是异步呢

    node里几乎所有用到回调函数的地方,都是异步的,回调函数后面的代码很可能比回调函数中的代码后先执行,特别是数据库操作.当然,node也提供了同步版本的函数,例如文件操作,fs.readFileSync()是fs.readFile()的同步版本. 那么问题来了,forEach()是不是异步的呢?按理说,没有加Sync,应该是异步的呀. 复制代码 代码如下: var arr = ['a', 'b', 'c'];  var str = '123';  arr.forEach(function(ite

  • javascript forEach函数实现代码

    复制代码 代码如下: function forEach(object, block, context, fn) { if (object == null) return; if (!fn) { if (typeof object == "function" && object.call) { //遍历普通对象 fn = Function; } else if (typeof object.forEach == "function" &&

  • jsp简单自定义标签的forEach遍历及转义字符示例

    接着昨天的,如果<forEach>中的items类型是map或者Collection类型的,怎样使用增强for循环: 首先还是创建一个标签处理器类,定义两个属性,String var; Object items: 因为items要迭代各种集合,所以要使用Object; 然后重写setter方法: 声明一个成员变量,集合类型的, 和上面两个属性是不相同的,这个是用在类里的, 在items的setter方法中,判断items的类型 然后继承他的doTag方法: 复制代码 代码如下: public

  • JS中的forEach、$.each、map方法推荐

    forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环.例如下面这个例子: [1, 2 ,3, 4].forEach(alert); 等同于下面这个for循环 var array = [1, 2, 3, 4]; for (var k = 0, length = array.length; k < length; k++) { alert(array[k]); } Array在ES5新增的方法中,参数都是function类型,默认有传参,forEach方法中的function回

  • javascript forEach通用循环遍历方法

    复制代码 代码如下: var forEach = (function(){ //数组与伪数组的遍历 var _Array_forEach = function (array, block, context) { if (array == null) return; //对String进行特殊处理 if(typeof array == 'string'){ array = array.split(''); } var i = 0,length = array.length; for (;i < l

  • JavaScript 中的12种循环遍历方法【总结】

    1.for 循环 let arr = [1,2,3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 1 // 1 2 // 2 3 for 循环是 Js 中最常用的一个循环工具,经常用于数组的循环遍历. 2.for in 循环 let obj = {name:'zhou',age:'**'} for(let i in obj){ console.log(i,obj[i]) } // name zhou // age

  • Javascript中八种遍历方法的执行速度深度对比

    前言 遍历数组或对象是一名程序员的基本素养之一. 然而遍历却不是一件简单的事, 优秀的程序员知道怎么去选择合适的遍历方法, 优化遍历效率. 本篇将带你走进JavaScript遍历的世界, 享受分析JS循环的快感. 本篇所有代码都可以直接运行, 希望您通读本篇后, 不止是浏览, 最好是亲手去实践下. 概述 js有如下两种数据需要经常遍历 数组(Array) 对象(Object) 同时又提供了如下8种方法方便我们遍历元素 for while(或do~while) forEach for in $.e

  • JavaScript CSS 通用循环滚动条

    滚动板 /* 初始化 */ body { font: 12px/1 "宋体", SimSun, serif; background:#fff; color:#000; } /*核心是 position:relative;,才能让其内部的 ul 以绝对定位,通过改变 top 值实现向上移位置.*/ .scrollUl { overflow:hidden; position:relative; } /*演示多个滚动板同时使用,这里是统一按每行按 20px 高,第一个每屏 4 行,第 2 个

  • JavaScript循环遍历的24个方法,你都知道吗

    JavaScript循环遍历的24个方法,你都知道吗

    目录 前言 一.数组遍历方法 1. forEach() 2. map() 3. for of 4. filter() 5. some().every() 6. reduce().reduceRight() 7. find().findIndex() 8. keys().values().entries() 二.对象遍历方法 1. for in 2. Object.keys().Object.values().Object.entries() 3. Object.getOwnPropertyNam

  • JavaScript循环遍历你会用哪些之小结篇

    总结JavaScript中的循环遍历 定义一个数组和对象 const arr = ['a', 'b', 'c', 'd', 'e', 'f']; const obj = { a: 1, b: 2, c: 3, d: 4 } for() 经常用来遍历数组元素 遍历值为数组元素索引 for (let i = 0; len = arr.length, i < len; i++) { console.log(i); // 0 1 2 3 4 5 console.log(arr[i]); // a b c

  • jQuery通用的全局遍历方法$.each()用法实例

    本文实例讲述了jQuery通用的全局遍历方法$.each()用法.分享给大家供大家参考,具体如下: 1.test.json文件代码: [ { "username": "张三", "content": "沙发." }, { "username": "李四", "content": "板凳." }, { "username": &q

  • MongoDB数据库forEach循环遍历用法

    MongoDB数据库forEach语句循环遍历功能是非常常用的一个功能. 采用foreach循环遍历,并每次循环允许执行一次回调函数. 此外,foreach循环遍历是for循环的一种扩展,对比同浏览器端的forEach用法是一致的. 示例如下: >var arr = ["ab","cd","ef"] >var show = function(value,index,ar){ print(value) } >arr.forEach

  • JavaScript 几种循环方式以及模块化的总结

    小小最近学习到了js的几种循环方式,对这几种循环方式进行总结.以及对模块化的相关知识点进行总结, 循环方式 循环方式分为好几种循环方式,分别是for循环,forEach循环,map循环,for..in循环,for-of循环,jquery的循环. 小小将会依次对这几种循环方式进行介绍. 一般数组遍历循环 这里使用常用的数组遍历方式. 一般来说,常用的数组遍历如下 for (var index = 0; index < myArray.length; index++) { console.log(m

  • Java之map的常见用法讲解与五种循环遍历实例代码理解

    目录 一.概述: 二.Map集合的功能介绍 三.map官方总结 四.实例 五.循环遍历的五种方法 一.概述: 将键映射到值的对象 一个映射不能包含重复的键 每个键最多只能映射到一个值 Map接口和Collection接口的不同 Map是双列的,Collection是单列的 Map的键唯一,Collection的子体系Set是唯一的 Map集合的数据结构针对键有效,跟值无关;Collection集合的数据结构是针对元素有效 二.Map集合的功能介绍 a:添加功能 V put(K key,V val

随机推荐