一、前言

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

二、forEach和map语法

2.1、语法:

//forEach
array.forEach(callback(currentValue, index, array){
//do something
}, this) //或者
array.forEach(callback(currentValue, index, array){
//do something
})   //map:
var new_array = arr.map(callback[, thisArg])  //$.each()
$(selector).each(function(index,element)) //注意参数的顺序

callback: 为数组中每个元素执行的函数,该函数接收三个参数,

参数一:当前数组中元素;参数二:索引; 参数三:当前数组。

this:可选,执行会掉时候,this的指向。

2.2、区别

  2.2.1、forEach()返回值是undefined,不可以链式调用。

  2.2.2、map()返回一个新数组,原数组不会改变。

  2.2.3、没有办法终止或者跳出forEach()循环,除非抛出异常,所以想执行一个数组是否满足什么条件,返回布尔值,可以用一般的for循环实现,或者用Array.every()或者Array.some();

  2.2.4、$.each()方法规定为每个匹配元素规定运行的函数,可以返回 false 可用于及早停止循环。

三、一些栗子

3.1 在使用forEach()时候,如果数组在迭代的视乎被修改则其他元素会被跳过。因为 forEach()不会在迭代之前创建数组的副本。

3.2反转字符串

var str = '12345';
Array.prototype.map.call(str, function(x) { //同时利用了call()方法
return x;
}).reverse().join('');

3.3一个笔试题。

["1", "2", "3"].map(parseInt);  //结果  [1, NaN, NaN]   

如果想得到[1, 2,3]应该这么做

function returnInt(element){
return parseInt(element,10);
} ["1", "2", "3"].map(returnInt);  

这主要是因为 parseInt()默认有两个参数,第二个参数是进制数。当parsrInt没有传入参数的时候,而map()中的回调函数时候,会给它传三个参数,第二个参数就是索引,明显不正确,所以返回NaN了。

3.4....

四、兼容性

forEach()和map()是ECMA5新引入的,可能在标准的其他实现中不存在,在使用前可以要Ployfill一下。

具体网上很多吧,更多的是在ie9以下,如果你的项目无视这些,那么你可以不care。

JS的forEach和map方法的区别,还有一个$.each的更多相关文章

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

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

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

    一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...

  3. JS中forEach和map的区别

    共同点: 1.都是循环遍历数组中的每一项. 2.forEach()和map()里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. 3.匿名函数中 ...

  4. js中 forEach 和 map 区别

    共同点: 1.都是循环遍历数组中的每一项. 2.forEach()和map()里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. 3.匿名函数中 ...

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

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

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

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

  7. for ,foreach ,map 循环的区别

    一.for循环 1.for - 循环代码块一定的次数 遍历数组最常用到的for循环,是最为熟知的一种方法 for (var i=0; i<5; i++) { x=x + "The nu ...

  8. JS 数组 foreach 和 map

    本文地址:http://www.cnblogs.com/veinyin/p/8794677.html  foreach 和 map 都是数组的迭代方法,对数组的每一项执行给定函数,不会改变原数组. 两 ...

  9. js 中 forEach 和 map

    共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. 3.匿名 ...

随机推荐

  1. Let's Encrypt,站点加密之旅

    HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.即HTTP下加入 ...

  2. 【原创】公司各个阶段 CTO 需要做什么?(上篇)

    CTO 是企业内技术最高负责人,对企业的发展起到至关重要的作用.但随着公司的不断发展,CTO 的工作重心也会不断变化.只有在正确的阶段做正确的事,才能更好地为公司做出贡献.我是空中金融 CTO ,TG ...

  3. Spring知识点回顾(03)Bean的 Scope

    sigleton prototype request session globalsession stepscope

  4. Ubuntu下安装最新sublime

    1. Install the GPG key: wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key ...

  5. ActiveMQ学习系列(三)----下载github源码并编译

    前记:坚持使用官网的资源去学习是挺痛苦的一个过程,昨天瞎溜达了一天,也没看到有系统性的学习文章,倒是发现了github上的ActiveMq项目. 地址:https://github.com/apach ...

  6. C语言的一些输出格式

    %e      printf()的一种输出格式 科学表示的一种浮点数 1.24==1.240000e+000     1240000==1.240000e+006                   ...

  7. POJ-1062 昂贵的聘礼---Dijkstra+枚举上界

    题目链接: https://vjudge.net/problem/POJ-1062 题目大意: 中文题 思路: 1是终点,可以额外添加一个源点0,0到任意一节点的距离就是这个点的money,最终求的是 ...

  8. Packer piplines and workflow

    packer对docker和aws AMI的支持都很好,来上个图: 配套的模版长这样: { "variables": { "name": "webim ...

  9. django实现model中choices类型字段,后台自由配置

    该功能主要试用于项目中有大量需要动态配置的字典字段,字典建议做缓存处理. 定义字典类型表,字典值两张表 2.配置对应的字典值 3.重写model的init方法,动态赋值choice 4.列表界面效果 ...

  10. Mac终端开启代理

    使用shadowsocks开启代理,只支持浏览器开启代理,其他软件是不能够开启代理的,因为这个问题,自己一直无法用本地终端 git clone 一些库,网上查找方法,总结如下: 步骤一:开启shado ...