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回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身。

因此,我们有:

[].forEach(function(value, index, array) {
// ...
});

对比jQuery中的$.each方法:

$.each([], function(index, value, array) {
// ...
});

会发现,第1个和第2个参数正好是相反的,大家要注意了,不要记错了。后面类似的方法,例如$.map也是如此。

var data=[1,3,4] ;
var sum=0 ;
data.forEach(function(val,index,arr){
console.log(arr[index]==val); // ==> true
sum+=val
})
console.log(sum); // ==> 8

map

这里的map不是“地图”的意思,而是指“映射”。[].map(); 基本用法跟forEach方法类似:

array.map(callback,[ thisObject]);

callback的参数也类似:

[].map(function(value, index, array) {
// ...
});

map方法的作用不难理解,“映射”嘛,也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方:

var data=[1,3,4]

var Squares=data.map(function(val,index,arr){
console.log(arr[index]==val); // ==> true
return val*val
})
console.log(Squares); // ==> [1, 9, 16]

注意:由于forEach、map都是ECMA5新增数组的方法,所以ie9以下的浏览器还不支持(万恶的IE啊),不过呢,可以从Array原型扩展可以实现以上全部功能,例如forEach方法:

if (typeof Array.prototype.forEach != "function") {
Array.prototype.forEach = function() {
/* 实现 */
};
}

具体请参考张鑫旭的博客:http://www.zhangxinxu.com/wordpress/2013/04/es5%E6%96%B0%E5%A2%9E%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95/#foreach

JS中的forEach、$.each、map方法的更多相关文章

  1. 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解

    提醒大家,Object.prototype.toString().call(param)返回的[object class]中class首字母是大写,像JSON这种甚至都是大写,所以,大家判断的时候可以 ...

  2. JavaScript -- 时光流逝(五):js中的 Date 对象的方法

    JavaScript -- 知识点回顾篇(五):js中的 Date 对象的方法 Date 对象: 用于处理日期和时间. 1. Date对象的方法 <script type="text/ ...

  3. JavaScript -- 时光流逝(三):js中的 String 对象的方法

    JavaScript -- 知识点回顾篇(三):js中的 String 对象的方法 (1) anchor(): 创建 HTML 锚. <script type="text/javasc ...

  4. 在JS中调用CS里的方法(PageMethods)

    在JS中调用CS里的方法(PageMethods) 2014年04月28日 11:18:18 被动 阅读数:2998   最近一直在看别人写好的一个项目的源代码,感觉好多东西都是之前没有接触过的.今天 ...

  5. Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

  6. JS中的五种去重方法

    JS中的五种去重方法 第一种方法: 第二种方法:  第三种方法: 第四种方法: 第五种方法:优化遍历数组法 思路:获取没重复的最右一值放入新数组 * 方法的实现代码相当酷炫,* 实现思路:获取没重复的 ...

  7. JS中的call()和apply()方法(转)

    转自:http://uule.iteye.com/blog/1158829 JS中的call()和apply()方法 博客分类: JS   1.方法定义 call方法: 语法:call([thisOb ...

  8. JS中的call()和apply()方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  9. JS中的call()和apply()方法理解和使用

    1.方法定义call方法: 语法:obj.method.call(thisObj[,arg1[, arg2[, [,.argN]]]]) 定义:调用对象(obj)的一个方法(method),以另一个对 ...

  10. js中判断对象数据类型的方法

    对js中不同数据的布尔值类型总结:false:空字符串:null:undefined:0:NaN.true:除了上面的false的情况其他都为true: 如下: var o = { 'name':'l ...

随机推荐

  1. 1.1Android系统架构

    Android目前是一个非常优秀的嵌入式系统,具有非常完善的系统架构! Android系统架构分为4层:(从下至上) 第一层:Linux内核层,包括驱动程序以及管理内存.进程.电源等资源的程序 因为A ...

  2. C# [STAThread]

    转载:http://www.cnblogs.com/netdazhi/articles/1189549.html 每个Thread都有一个关于ApartmentState的属性,可以把它设置为:STA ...

  3. Cassandra 技术选型的问题

    Cassandra在国内资料少,用的也不多,大家更多抱观望态度吧. 为了扩大Cassandra队伍帮助自己采坑,决定写一篇文章,就自己对Cassandra的理解范围进行介绍. 选用Cassandra的 ...

  4. firefox 扩展开发笔记(三):高级ui交互编程

    firefox 扩展开发笔记(三):高级ui交互编程 前言 前两篇链接 1:firefox 扩展开发笔记(一):jpm 使用实践以及调试 2:firefox 扩展开发笔记(二):进阶开发之移动设备模拟 ...

  5. Android计时器TimerTask,Timer,Handler

    Android计时器TimerTask,Timer,若要在TimerTask中更新主线程UI,鉴于Android编程模型不允许在非主线程中更新主线程UI,因此需要结合Android的Handler实现 ...

  6. express中使用 connect-flash 及其源码研究

    刚开始摸node.js, 在用express 4.x 的过程中 有一个connect-flash的玩意 如上图, 在 /reg 页面提交注册信息的时候 如若两次输入的密码不匹配则调用请求对象req的f ...

  7. rspec的一些常见用法

    这里讲了如何安装rspec,安装使用rspec. 下面介绍一下rspec中常见的使用方法. 下面是一个最简单的测试用例,判断true是不是等于true,should_be是旧的用法,新用法推荐使用ex ...

  8. 在MAC OS 下配置python + Flask ,并支持pyCharm编辑器

    原创咯- flask是一个micro framework ,伸缩性很强.可以部署到openshift 的PAAS里.这个框架上手非常快.喜欢的可以试试. 若实在MAC里,python已经默认安装了.1 ...

  9. python中的多继承

    python和C++一样,支持多继承.概念虽然容易,但是困难的工作是如果子类调用一个自身没有定义的属性,它是按照何种顺序去到父类寻找呢,尤其是众多父类中有多个都包含该同名属性. class P1 #( ...

  10. Bing Speech Recognition 标记

    Bing Speech Services Bing   Bing Speech Services provide speech capabilities for Windows and Windows ...