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


Posted in Javascript onMay 19, 2016

•原理:

•高级浏览器支持forEach方法

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

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

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

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

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

•forEach方法中的this是ary,匿名回调函数中的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;
console.log(ary);//-->会对原来的数组产生改变;

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

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

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

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]

•兼容写法:

•不管是forEach还是map在IE6-8下都不兼容(不兼容的情况下在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;
}

PS:以上写法如有错误欢迎指正,^^

以上这篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
当jquery ajax遇上401请求的解决方法
May 19 #Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 #Javascript
前端js文件合并的三种方式推荐
May 19 #Javascript
Node.js+Express配置入门教程
May 19 #Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 #Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 #Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 #Javascript
You might like
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
php join函数应用
2011/05/04 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
快速了解Python相对导入
2018/01/12 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
通过python3实现投票功能代码实例
2019/09/26 Python
python爬虫 requests-html的使用
2020/11/30 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
商务日语专业毕业生求职信
2013/10/26 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
亲属关系公证书
2014/04/08 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
网络营销计划
2015/01/17 职场文书
采购员岗位职责
2015/02/03 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏