JS中的forEach、$.each、map方法

forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环。例如下面这个例子:

[1, 2 ,3, 4].forEach(alert);

等同于下面这个for循环

1 var array = [1, 2, 3, 4];
2 for (var k = 0, length = array.length; k < length; k++) {
3  alert(array[k]);
4 }

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.jb51.net/article/81955.htm

时间: 2025-01-05 07:57:00

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

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

Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让人感觉不到,这种情况一切正常,但这个时间也可能很长,这时候用户可能会看到满屏尽是{{xxxx}}.这种情况被叫做"Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.".

js中字符串常用熟悉和方法

for(var i=0;i<=450;i++){ for(var j=380-i;j+i<=450 && j+i>=380;j++){ if((i*75+j*80.1)==(i+j)*76){ alert('nan:'+i+'nv:'+j); } } } js中字符串常用熟悉和方法,布布扣,bubuko.com

js中的hasOwnProperty和isPrototypeOf方法

转自:http://www.cnblogs.com/jenry/archive/2010/12/08/1900150.html hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象.不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员. isPrototypeOf:是用来判断要检查其原型链的对象是否存在于指定对象实例中,是则返回true,否则返回false. 实例try: function siteAdmin(nickName,s

js中实现数组的indexOf方法

时间过得很快,转行做开发整一年了,打算出去见见世面.看我现在技术水平能达到什么层次,好确定以后的学习方向,也看看外面的公司都在使用一些什么样的技术. 昨天面了一家公司,对方直接让我答的压轴题.一个简单的算法设计题:熟悉js的同学知道js中字符串有个indexOf方法,现在需要实现数组的indexOf方法.由于本科并非计算机专业,编程方面的一些基本功还很不扎实(比如基础算法掌握程度.算法设计能力),昨天没把题目做对.今天赶紧写出来,以免以后遇上还得再去想.罗里吧嗦一顿,上代码吧还是: 1 Arra

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

转载自[脚本之家],原文链接:http://www.jb51.net/article/42864.htm 提醒大家,Object.prototype.toString().call(param)返回的[object class]中class首字母是大写,像JSON这种甚至都是大写,所以,大家判断的时候可以都转换成小写,以防出错 1.typeof(param) 返回param的类型(string) 这种方法是JS中的定义的全局方法,也是编译者们最常用的方法,优点就是使用简单.好记,缺点是不能很好的

在JS中使用COM组件的方法

首先创建一个COM组件,插入一个双接口Itest,在此接口上实现以下三个方法: STDMETHODIMP Ctest::test(void) //无输入输出参数 { // TODO: 在此添加实现代码 MessageBox(NULL,L"test",L"test",MB_OK); return S_OK; } STDMETHODIMP Ctest::test1(BSTR a1) //有一个字符串输入参数 { // TODO: 在此添加实现代码 MessageBox(

【js插件进阶】JS中的call()和apply()方法详解

JS中的call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj. apply方法: 语法:apply(

js中的fliter(),map(),forEach()方法

1 filter(): 语法:var filteredArray = array.filter(callback[, thisObject]); 参数说明:callback: 要对每个数组元素执行的回调函数. thisObject : 在执行回调函数时定义的this对象. 1 //过滤掉小于 10 的数组元素: 2 3 //代码: 4 function isBigEnough(element, index, array) { 5 return (element >= 10); 6 } 7 var

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

转载自:http://uule.iteye.com/blog/1158829 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj.

JS中如何实现属性和方法的继承

JS中面向对象的实现: function Person(name,color){ this.name = name; this.color = color; } Person.prototype.showName = function(){ alert(this.name); } Person.prototype.showColor = function(){ alert(this.color); } function Worker(name,color,job,age){ Person.app