一、定义

foreach():  从头到尾遍历数组,为每个元素调用指定的函数。

map():  将调用的数组的每个元素传递给指定的函数,并返回一个数组,他包含该函数的返回值。

传递的函数是 foreach() / map() 的第一个参数,该函数有三个参数:数组的元素(item)+元素的索引(index)+数组本身(input),第二个参数是 上下文(content)。

 foreach() 方法中的this 是调用foreach()方法的数组;传入的匿名函数中的this默认是window。

var ary = [12,23,24,42,1];
var res = ary.forEach(function (item,index,input) {
input[index] = item*10;
})
console.log(res); // undefined; //foreach()没有返回值
console.log(ary); // [120, 230, 240, 420, 10] // 会对原来的数组产生改变;
var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,input) {
return item*10;
})
console.log(res); // [120,230,240,420,10] // 有返回值
console.log(ary); // [12,23,24,42,1] // 不会修改原数组

二、区别总结

1、map速度比foreach快;

2、map会返回一个跟原数组长度相同格式相同的新数组,且不会对原数组产生影响,foreach不会产生新数组;

3、map因为返回的是数组所以可以链式操作,foreach不能。

推荐使用 .map()

三、兼容性问题

高级浏览器(包括ie9以上)支持map和foreach方法对数组循环遍历,ie6~ie8不支持map和foreach方法

四、兼容性处理

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

 /**
* forEach遍历数组
* @param callback [function] 回调函数;
* @param context [object] 上下文;
*/
Array.prototype.myForEach = function myForEach(callback,context){
context = context || window;
if('forEach' in Array.prototye) {
this.forEach(callback,context);
return;
}
//IE6-8下自己编写回调函数执行的逻辑
for(var i = 0,len = this.length; i < len;i++) {
callback && callback.call(context,this[i],i,this);
}
}
/**
* map遍历数组
* @param callback [function] 回调函数;
* @param context [object] 上下文;
*/
Array.prototype.myMap = function myMap(callback,context){
context = context || window;
if('map' in Array.prototye) {
return this.map(callback,context);
}
//IE6-8下自己编写回调函数执行的逻辑
var newAry = [];
for(var i = 0,len = this.length; i < len;i++) {
if(typeof callback === 'function') {
var val = callback.call(context,this[i],i,this);
newAry[newAry.length] = val;
}
}
return newAry;
}

数组的forEach和map和for方法的区别的更多相关文章

  1. forEach和map和for方法的区别

    JS中的forEach.$.each.map方法推荐 转载  2016-04-05   投稿:jingxian    我要评论 下面小编就为大家带来一篇JS中的forEach.$.each.map方法 ...

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

    原理: 高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是 ...

  3. (转载)js数组中的find、filter、forEach、map四个方法的详解和应用实例

    数组中的find.filter.forEach.map四个语法很相近,为了方便记忆,真正的掌握它们的用法,所以就把它们总结在一起喽. find():返回通过测试的数组的第一个元素的值 在第一次调用 c ...

  4. JavaScript 数组、字符串、Map、Set 方法整理

    在线阅读 https://www.kancloud.cn/chenmk/web-knowledges/1080519 数组 isArray():Array.isArray(value) 用于检测变量是 ...

  5. JavaScript数组forEach()、map()、reduce()方法

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

  6. js和jquery中的遍历对象和数组(forEach,map,each)

    arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项,index当前项的索引,array原始数组: ...

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

    forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each(),长得和f ...

  8. JS的forEach和map方法的区别

    一.前言 forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each() ...

  9. Scala 中的foreach和map方法比较

    Scala中的集合对象都有foreach和map两个方法.两个方法的共同点在于:都是用于遍历集合对象,并对每一项执行指定的方法.而两者的差异在于:foreach无返回值(准确说返回void),map返 ...

随机推荐

  1. [vijos1048]送给圣诞夜的贺卡<DFS剪枝>

    题目链接:https://www.vijos.org/p/1048 很多人一看就想出了思路,不就是一个裸的dfs蛮...但是..在n<=50的情况下,朴素会直接tle..... 然后我就开始剪枝 ...

  2. phpStorm 激活方式

    phpStorm10  激活方式 方法一:   注册时选择License server  http://idea.lanyus.com/    方法二:  用户名:Ly  注册码:  \===== L ...

  3. E - River Hopscotch POJ - 3258(二分)

    E - River Hopscotch POJ - 3258 Every year the cows hold an event featuring a peculiar version of hop ...

  4. B. The Monster and the Squirrel

    B. The Monster and the Squirrel Ari the monster always wakes up very early with the first ray of the ...

  5. 面试常问的 Java 虚拟机运行时数据区

    写在前面 本文描述的有关于 JVM 的运行时数据区是基于 HotSpot 虚拟机. 概述 JVM 在执行 Java 程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以 ...

  6. Spark Streaming 编程入门指南

    Spark Streaming 是核心Spark API的扩展,可实现实时数据流的可伸缩,高吞吐量,容错流处理.可以从许多数据源(例如Kafka,Flume,Kinesis或TCP sockets)中 ...

  7. springboot-mybatis-oracle学习笔记

    前言 最近公司的项目是基于 oracle 数据库的,这里记录下 springboot+mybatis+oracle 的踩坑过程. 开发前准备 环境参数 开发工具:IDEA 基础工具:Maven+JDK ...

  8. Linux配置dhcp服务器

    一.安装dhcp软件 yum -y install dhcp 二.配置 dhcp 主配置文件 /etc/dhcp/dhcpd.conf ns-update-style interim; log-fac ...

  9. spring使用jdbc

    对于其中的一些内容 @Repository(value="userDao") 该注解是告诉Spring,让Spring创建一个名字叫“userDao”的UserDaoImpl实例. ...

  10. MySQL学习之路7-索引、事务、函数、存储过程、游标

    索引 使用索引快速定位某列中特定值的行,不需要遍历数据表所有行. 创建索引的数据结构:BTREE and HASH. 主键也是一种索引,Primary key. show index from ord ...