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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
JS封装cavans多种滤镜组件
Feb 15 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
php笔记之常用文件操作
2010/10/12 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
关于php开启错误提示的总结
2019/09/24 PHP
详解JS函数重载
2014/12/04 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
JS验证码实现代码
2017/09/14 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
Python 文件和输入输出小结
2013/10/09 Python
python中xrange用法分析
2015/04/15 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
使用Python函数进行模块化的实现
2019/11/15 Python
python中线程和进程有何区别
2020/06/17 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
工厂厂长的职责
2013/12/12 职场文书
生死抉择观后感
2015/06/09 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
Redis的字符串是如何实现的
2021/10/24 Redis