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回调支持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() {
/* 实现 */
};
}
JS中的forEach、$.each、map方法的更多相关文章
- 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
提醒大家,Object.prototype.toString().call(param)返回的[object class]中class首字母是大写,像JSON这种甚至都是大写,所以,大家判断的时候可以 ...
- JavaScript -- 时光流逝(五):js中的 Date 对象的方法
JavaScript -- 知识点回顾篇(五):js中的 Date 对象的方法 Date 对象: 用于处理日期和时间. 1. Date对象的方法 <script type="text/ ...
- JavaScript -- 时光流逝(三):js中的 String 对象的方法
JavaScript -- 知识点回顾篇(三):js中的 String 对象的方法 (1) anchor(): 创建 HTML 锚. <script type="text/javasc ...
- 在JS中调用CS里的方法(PageMethods)
在JS中调用CS里的方法(PageMethods) 2014年04月28日 11:18:18 被动 阅读数:2998 最近一直在看别人写好的一个项目的源代码,感觉好多东西都是之前没有接触过的.今天 ...
- Angular.js中处理页面闪烁的方法详解
Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...
- JS中的五种去重方法
JS中的五种去重方法 第一种方法: 第二种方法: 第三种方法: 第四种方法: 第五种方法:优化遍历数组法 思路:获取没重复的最右一值放入新数组 * 方法的实现代码相当酷炫,* 实现思路:获取没重复的 ...
- JS中的call()和apply()方法(转)
转自:http://uule.iteye.com/blog/1158829 JS中的call()和apply()方法 博客分类: JS 1.方法定义 call方法: 语法:call([thisOb ...
- JS中的call()和apply()方法
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
- JS中的call()和apply()方法理解和使用
1.方法定义call方法: 语法:obj.method.call(thisObj[,arg1[, arg2[, [,.argN]]]]) 定义:调用对象(obj)的一个方法(method),以另一个对 ...
- js中判断对象数据类型的方法
对js中不同数据的布尔值类型总结:false:空字符串:null:undefined:0:NaN.true:除了上面的false的情况其他都为true: 如下: var o = { 'name':'l ...
随机推荐
- java的WebService实践(cxf)
Java发布WebService,结合Spring,通过cxf的方式 难点:1.引用什么jar包: 1.创建接口 源码如下: package com.nankang; import javax.jws ...
- Android IOS WebRTC 音视频开发总结(二九)-- 安卓噪声消除交流
Android上的音质一直被大家所困扰和诟病,这里面有很多原因, 下面是最近一位前UC同行发邮件跟我交流的一些记录,供参考,支持原创,文章来自博客园RTC.Blacker,转载请说明出处. 以下文字来 ...
- 十八、ValueStack&ActionContext(非常重点:值栈)
ValueStack&ActionContext(非常重点:值栈) 1.针对用户的每次动作访问,都会创建属于自己的ValueStack对象 2.ValueStack中的的常用方法:功能一定要知 ...
- Java Base64 加密解密
使用JDK的类 BASE64Decoder BASE64Encoder package test; import sun.misc.BASE64Decoder; import sun.misc.BA ...
- 一个学生分数表,用sql语句查询出各班级的前三名
昨天去一家公司面试,被这道题难住了,哎,又失去一次好的机会. 回来 之后就再想这个问题 表结构及数据如下:
- wpf仿QQ之窗体翻转
很久以前在网上找过窗体翻转的Demo,但看得不是很明白,大多是内容的翻转,研究了下,现在分享给大家. 利用UIElement.RenderTransform 属性就能实现元素的呈现位置的转换,因此只需 ...
- Linux文件和目录管理常用重要命令
一.目录与路径 1.相对路径与绝对路径 因为我们在Linux系统中,常常要涉及到目录的切换,所以我们必须要了解 "路径" 以及 "相对路径" 与 "绝 ...
- What is the difference between differed processing mode and interactive mode?
Every time you access and navigate through the fields on a page in PeopleSoft there are events such ...
- c# 实现串口编程-操作LED屏幕
串口编程主要用到SerialPort这个类,主要实现对串口发送字节数组然后点阵屏显示相关信息,其实这个功能很简单下面给大家把整体思路用流程图展现如下:. 其实整体思路就如流程图.下面是整个流程图的一个 ...
- “requireJs前传”之为什么要用前端模块化?
对于没有接触过后台的前端同学想要理解模块化是很困难的,鉴于未来的趋势,以下是我转载的一篇文章,希望对大家有用! 特此声明:转载文章,不喜勿喷.和谐前端,世界和平!0.0 模块的写法 随着网站逐渐变成” ...