forEach与map

一、原生js forEach()和map()遍历

共同点:

1.都是循环遍历数组中的每一项。

2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。

3.匿名函数中的this都是指Window。

4.只能遍历数组。

1.forEach()

没有返回值。

[javascript] view plain copy

  1. var ary = [12,23,24,42,1];
  2. var res = ary.forEach(function (item,index,input) {
  3. input[index] = item*10;
  4. })
  5. console.log(res);//-->undefined;
  6. console.log(ary);//-->会对原来的数组产生改变;

2.map()

有返回值,可以return 出来。

[javascript] view plain copy

  1. var ary = [12,23,24,42,1];
  2. var res = ary.map(function (item,index,input) {
  3. return item*10;
  4. })
  5. console.log(res);//-->[120,230,240,420,10];
  6. console.log(ary);//-->[12,23,24,42,1];

兼容写法:

不管是forEach还是map在IE6-8下都不兼容(不兼容的情况下在Array.prototype上没有这两个方法),那么需要我们自己封装一个都兼容的方法,代码如下:

[javascript] view plain copy

  1. /**
  2. * forEach遍历数组
  3. * @param callback [function] 回调函数;
  4. * @param context [object] 上下文;
  5. */
  6. Array.prototype.myForEach = function myForEach(callback,context){
  7. context = context || window;
  8. if(‘forEach‘ in Array.prototye) {
  9. this.forEach(callback,context);
  10. return;
  11. }
  12. //IE6-8下自己编写回调函数执行的逻辑
  13. for(var i = 0,len = this.length; i < len;i++) {
  14. callback && callback.call(context,this[i],i,this);
  15. }
  16. }

[javascript] view plain copy

  1. /**
  2. * map遍历数组
  3. * @param callback [function] 回调函数;
  4. * @param context [object] 上下文;
  5. */
  6. Array.prototype.myMap = function myMap(callback,context){
  7. context = context || window;
  8. if(‘map‘ in Array.prototye) {
  9. return this.map(callback,context);
  10. }
  11. //IE6-8下自己编写回调函数执行的逻辑
  12. var newAry = [];
  13. for(var i = 0,len = this.length; i < len;i++) {
  14. if(typeof  callback === ‘function‘) {
  15. var val = callback.call(context,this[i],i,this);
  16. newAry[newAry.length] = val;
  17. }
  18. }
  19. return newAry;
  20. }

二、jQuery $.each()和$.map()遍历

共同点:

即可遍历数组,又可遍历对象。

1.$.each()

没有返回值。$.each()里面的匿名函数支持2个参数:当前项的索引i,数组中的当前项n。如果遍历的是对象,k 是键,n 是值。

[javascript] view plain copy

  1. $.each( ["a","b","c"], function(i, n){
  2. alert( i + ": " + n );
  3. });

[javascript] view plain copy

  1. $("span").each(function(i, n){
  2. alert( i + ": " + n );
  3. });

[javascript] view plain copy

  1. $.each( { name: "John", lang: "JS" }, function(k, n){
  2. alert( "Name: " + k + ", Value: " + n );
  3. });

2.$.map()

有返回值,可以return 出来。$.map()里面的匿名函数支持2个参数和$.each()里的参数位置相反:数组中的当前项n,当前项的索引i。如果遍历的是对象,i 是值,n 是键。如果是$("span").map()形式,参数顺序和$.each()  $("span").each()一样。

[javascript] view plain copy

  1. var arr=$.map( [0,1,2], function(n){
  2. return n + 4;
  3. });
  4. console.log(arr);

[javascript] view plain copy

  1. $.map({"name":"Jim","age":17},function(i,n){
  2. console.log(i+":"+n);
  3. });

文章来自 http://blog.csdn.net/huangpb123/article/details/52756303

时间: 2024-10-16 19:28:29

forEach与map的相关文章

一张图看懂JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some

好吧,竟然不能单发一张图,不够200字啊不够200字! 在<JavaScript高级程序设计>中,分门别类介绍了非常多数组方法,其中迭代方法里面有6种,这6种方法在实际项目有着非常广泛的作用.其中本人最爱用forEach和map,好用又高效,不用什么都是for循环大法.但是初学的时候往往觉得头大,这些方法都很像,到底有什么区别?趁着今天有空,我把对着6个方法的认知,用最浅显的图画出来,希望看到的同学觉得有用.

JavaScript中foreach、map函数

语法:forEach和map都支持2个参数:一个是回调函数(item,index,input)和上下文: ?forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: ?数组中有几项,那么传递进去的匿名回调函数就需要执行几次: ?每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input: ?理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改:但是我们可以自己通过数组的索引来修改原

JS的forEach和map方法的区别,还有一个$.each

forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each(),长得和forEach()有点像,功能也类似.但是从本质上还是有很大的区别的,那么我们探探究竟. 一.forEach和map语法 语法: //forEach array.forEach(callback(currentValue, index, array){ //do something }, this)

JavaScript中的数组遍历forEach()与map()方法以及兼容写法

原理: 高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: 数组中有几项,那么传递进去的匿名回调函数就需要执行几次: 每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input: 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改:但是我

js原生forEach、map与jquery的each、$.each的区别

1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>rem phone test</title> 7 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximu

原生JS forEach()和map()遍历的区别以及兼容写法

一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. 3.匿名函数中的this都是指Window. 4.只能遍历数组. 1.forEach() 没有返回值. arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项,

for-in和for-of,forEach和Map

for-in和for-of 1. for-in循环实际是为循环"enumerable"对象而设计的,是用来循环带有字符串key的对象的. 使用for in会遍历数组所有的可枚举属性,包括原型.所以for in更适合遍历对象,不要使用for in遍历数组. var obj = {a:1, b:2, c:3}; for (var prop in obj) { console.log("obj." + prop + " = " + obj[prop])

forEach和map和for方法的区别

那么接下来,我继续做分析,为什么更推荐用.map(),而不是.forEach()? 首先,.map()要比.forEach()执行速度更快.虽然我也说过执行速度不是我们需要考虑的主要因素,但是他们都比for()要更好用,那肯定要选更优化的一个. 第二,.forEach()的返回值并不是array.如果你想用函数式编程写个链式表达式来装个逼,.map()将会是你不二的选择. 来看下面这个例子: var arr = [1, 2, 3]; console.log( arr.map(function(i

JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()

ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实非常好用.在过去,我会为了兼容性尽量不用这些方法.但是,总不能为了旧的丢了新的吧?!虽然说jQuery已经集成好了不少语法糖,但jQuery体积太庞大,作为一名志于体面的前端儿得知道原生的兼容性写法要怎么写.于是这几天,我开始在琢磨这些方法的兼容性写法.其实并不难,就是以前不够自信不敢写.写完以后,