语法:forEach和map都支持2个参数:一个是回调函数(item,index,input)和上下文;

•forEach:用来遍历数组中的每一项;这个方法执行是没有返回值的,对原来数组也没有影响;

•数组中有几项,那么传递进去的匿名回调函数就需要执行几次;

•每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input;

•理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;但是我们可以自己通过数组的索引来修改原来的数组;

•forEach方法中的this是ary,匿名回调函数中的this默认是window;

因此:

  [].forEach(function(value,index,array){

    //code something

  });

等价于:

  $.each([],function(index,value,array){

    //code something

  })

会发现,第1个和第2个参数正好是相反的,要注意了,不要记错了。后面类似的方法,例如$.map也是如此。

  1. var arr = [1,2,3,4];
  2. var res= arr.forEach(function(value,index,array){
  3. array[index] = value*4;
  4. });
  5. console.log(arr); //结果为[4,8,12,16]
  1. console.log(res); //undefined

map:map即是 “映射”的意思 用法与 forEach 相似,用法即:

[].map(function(value,index,array){

  //code

})

  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]

•map:和forEach非常相似,都是用来遍历数组中的每一项值的,用来遍历数组中的每一项;

•区别:map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);

•不管是forEach还是map 都支持第二个参数值,第二个参数的意思是把匿名回调函数中的this进行修改。

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

  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. }
  17. /**
  18. * map遍历数组
  19. * @param callback [function] 回调函数;
  20. * @param context [object] 上下文;
  21. */
  22. Array.prototype.myMap = function myMap(callback,context){
  23. context = context || window;
  24. if('map' in Array.prototye) {
  25. return this.map(callback,context);
  26. }
  27. //IE6-8下自己编写回调函数执行的逻辑
  28. var newAry = [];
  29. for(var i = 0,len = this.length; i < len;i++) {
  30. if(typeof callback === 'function') {
  31. var val = callback.call(context,this[i],i,this);
  32. newAry[newAry.length] = val;
  33. }
  34. }
  35. return newAry;
  36. }

js foreach、map函数的更多相关文章

  1. js javascript map函数去重功能的使用实例

    js javascript map函数去重功能的使用实例 先上一个实战例子代码 var map = new Map(); for(var i=0; i<=9; i++){ map.set(i,i ...

  2. js array map() 函数的简单使用

    语法: array.map(function(currentValue,index,arr), thisValue) currentValue:必须.当前元素的值 index:可选.当前元素的索引值 ...

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

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

  4. JS中map和foreach的区别以及some和every的用法

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

  5. 原生JS forEach()和map()遍历,jQuery$.each()和$.map()遍历

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

  6. 应该用forEach改变数组的值吗? 原生JS forEach()和map()遍历的异同点

    应该用forEach改变数组的值吗? https://segmentfault.com/q/1010000013170900?utm_source=index-hottest 由于js中的数组是引用类 ...

  7. js中数组的循环与遍历forEach,map

    对于前端的循环遍历我们知道有 针对js数组的forEach().map().filter().reduce()方法 针对js对象的for/in语句(for/in也能遍历数组,但不推荐) 针对jq数组/ ...

  8. js之 foreach, map, every, some

    js中array有四个方法 foreach, map, every, some,其使用各有倾向. 关注点一:foreach 和 map 无法跳出循环,每个元素均执行 foreach 和 map 无法跳 ...

  9. js parseInt和map函数

    今天看了一个js的题目["1","2","3"].map(parseInt),看到后脑海中浮现的答案是[1,2,3],但是看到正确答案后蒙了 ...

  10. JS数组中every(),filter(),forEach(),map(),some()方法学习笔记!

    ES5中定义了五种数组的迭代方法:every(),filter(),forEach(),map(),some(). 每个方法都接受两个参数:要在每一项运行的函数(必选)和运行该函数的作用域的对象-影响 ...

随机推荐

  1. asp.net core权限模块的快速构建

    大部分系统都会有权限模块,别人家系统的权限怎么生成的我不知道,我只知道这样做是可以并且挺好的. 文章中只对asp.net core的部分代码进行说明 呃 记录~,mvc版本自行前往仓库查阅 代码中的一 ...

  2. HDFS 分布式写入问题 AlreadyBeingCreatedException

    进行追加文件时出现AlreadyBeingCreatedException错误 堆栈信息大致如下: org.apache.hadoop.ipc.RemoteException(org.apache.h ...

  3. 【JVM命令系列】jstat

    命令基本概述 Jstat是JDK自带的一个轻量级小工具.全称"Java Virtual Machine statistics monitoring tool",它位于java的bi ...

  4. GCD hdu1695容斥原理

    GCD Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  5. 配置eNSP和本地电脑上的网卡相连,从而直接从本地电脑连接设备

  6. DevOps之基础设施

    唠叨话 关于德语关我屁事的知识点,仅提供精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <信息技术(IT )> 关于IT信息技术的基础设施,知识与技能的层次(知道.理解.运用) ...

  7. 使用Olami SDK 语音控制一个支持HomeKit的智能家居的iOS程序

    前言 HomeKit是苹果发布的智能家居平台.通过HomeKit组件,用户可以通过iphone.iPad和ipod Touch来控制智能灯泡,风扇.空调等支持HomeKit的智能家居,尤其是可以通过S ...

  8. 如何让vim像IDE一样一键放大缩小字号?

    原创,转载请注明出处 在其他IDE中,比如codeblocks,按住ctrl,然后滑动鼠标滚轮就可以实现字体的放大缩小. 在强大的vim中code怎么能缺少这种功能?! 在vim插件库中查询一番,发现 ...

  9. PHP知识大全

    --------------------------------------------------------- PHP知识大全 ---------------------------------- ...

  10. 读Zepto源码之Form模块

    Form 模块处理的是表单提交.表单提交包含两部分,一部分是格式化表单数据,另一部分是触发 submit 事件,提交表单. 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea ...