注:原文地址http://blog.csdn.net/oscar999/article/details/8671546

我这里是仿照学习!

1、js的数组循环遍历

  ①数组的遍历首先想到的是for()循环语句

var arr = ['summer','i','love', 'you'];
for(var i=0, length=arr.length; i<length; i++)
{
alert(arr[i]);
}

②其次,比较简单的方法 forEach()

FireFox 和Chrome的Array类型都有forEach()方法,但IE的Array类型没有forEach()方法。

var arr = ['summer','i','love', 'you'];
/*也可以这样来定义这个数组
  var arr = [];
  arr.push('summer');
  arr.push('i');
  arr.push('love');
  arr.push('you');
*/ //遍历数组,直接调用Array类型的prototype上面的forEach()方法
arr.forEach(function(e){
alert(e);
})

2、让IE兼容数组的forEach()方法

//IE中
alert(Array.prototype.forEach) // undefined

上面的代码说明了IE中的Array类型没有forEach()方法

好,既然IE的Array类型没有forEach()方法,那我们现在给它加上forEach()方法

//Array.forEach implementation for IE support..
//https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(callback, thisArg) {
var T, k;
if (this == null) {
throw new TypeError(" this is null or not defined");
}
var O = Object(this);
var len = O.length >>> 0; // Hack to convert O.length to a UInt32
if ({}.toString.call(callback) != "[object Function]") {
throw new TypeError(callback + " is not a function");
}
if (thisArg) {
T = thisArg;
}
k = 0;
while (k < len) {
var kValue;
if (k in O) {
kValue = O[k];
callback.call(T, kValue, k, O);
}
k++;
}
};
}

IE中定义好了之后,Array类型上面就有了forEach()方法,就可以调用了。

var arr=[1,2,3];
arr.forEach(function(e){alert(e)}); //依次弹出1,2,3

3、forEach(callback)方法中传入的是callback ,callback为一个回调函数——即每次遍历都会调用的函数

比如,其实forEach()里面传入的回调函数其实是以前我们写在for()循环体{}里面的代码,这其实就是一种抽象,更明朗,我们把以前写在for(){}循环体{}里面的代码(处理过程)放到一个函数中去,然后作为参数传入forEach()方法中。。这也是js中将函数作为参数传递的一个体现。

//取出数组中能被2或3整除的数
var oldArr = [1,2,3,4,5,6,7,8];
var newArr = []; //var new =[]; this will be error ,the "new " is the key world in javascript
oldArr.forEach(function(e){
if(e%2 == 0){
newArr.push(e);
return ; //注意,这里不能用break;或者是continue;
}else if(e%3 == 0){
newArr.push(e);
return ;
}
})

其实,一看上面的这个取出数组中能被2,3整除的数逻辑显然不够简洁,下面改进

var oldArr = [1,2,3,4,5,6,7];
var newArr = []; oldArr.forEach(function(e){
if(e%2 ==0 || e%3==0){
newArr.push(e);
}
})

手写js代码(一)javascript数组循环遍历之forEach的更多相关文章

  1. JavaScript数组循环遍历之forEach

    1.  js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了. 除此之外,也可以使用较简便的forEach 方式 2.  forEac ...

  2. Javascript 数组循环遍历之forEach

    1.  js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了. 除此之外,也可以使用较简便的forEach 方式   2.  forE ...

  3. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  4. .net学习之Session、Cookie、手写Ajax代码以及请求流程

    1.IIS 7 以上版本集成了两种模式,一种是经典模式,一种是集成模式(直接将asp.net框架集成到IIS中) 2.浏览器和服务器端通过什么技术来实现的?Socket(套接字),通信的语法是HTTP ...

  5. 手写js面向对象选项卡插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. Asp.net mvc怎么在razor里写js代码

    我试图在Razor里写JS代码,但是不行 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 3 ...

  8. cocos2dx手写js绑定C++

    这两天连续查阅了js绑定c++的非常多文章  , 有手动与自己主动两种方式 . 本来想用自己主动绑定的 , 可是NDK一直下载不下来.....就给算了 . 以下总结一下手动绑定的实现过程 : 一共三步 ...

  9. html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

    html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

随机推荐

  1. Android 5.0之后屏幕截图的方法

    截图的几种方法 Android获取屏幕截图主要有以下三种方法 1.通过view.getDrawingCache()获取指定View的绘制缓存来实现截屏. 这种方式Android 5.0之前也可以,且不 ...

  2. DOM操作-动态创建网页元素

    动态创建新的DOM元素,是JavaScript操作网页对象模型的重要手段之一 代码: <!DOCTYPE html> <html> <head> <title ...

  3. DOM操作-克隆元素

    代码: ———————————————————————————— <script type="text/javascript">            //克隆元素   ...

  4. 其他应用和技巧-eval()函数大行其道

    ---------------------------------- <script type="text/javascript">                   ...

  5. akka 文章 博客

    http://blog.csdn.net/wsscy2004/article/category/2430395 Actor生命周期理解 Actor生命周期理解 镇图:Actor内功心法图 Actor的 ...

  6. php过滤提交数据 防止sql注入攻击

    规则 1:绝不要信任外部数据或输入 关于 Web 应用程序安全性,必须认识到的第一件事是不应该信任外部数据.外部数据(outside data) 包括不是由程序员在 PHP 代码中直接输入的任何数据. ...

  7. eclipse安卓引入库项目的正确方法

    之前清单文件里theme主题老是改不成库项目里定义好的主题@style/Theme.AppCompat.Light,只能用默认主题@style/AppTheme <application and ...

  8. JSP内置对象--4种属性范围 (pageContext,request,session,application)

    pageContext: javax.servlet.jsp.JspContext抽象类的父类JspContext 中有以下方法. request:javax.servlet.http.的接口Http ...

  9. Spring.NET 中的 ADO.NET 数据访问的示例

    Spring.NET 1.3.1 中提供了一个使用 AdoTemplate 的完整示例,包括使用泛型和使用非泛型技术进行数据访问,这个示例位于下载的压缩包中\Spring.NET-1.3.1\Spri ...

  10. replication across two data centers

    http://andyhan.net/index.php/sys-adm/item/291-hbase-replication http://shitouer.cn/2013/04/hbase-mul ...