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 相关文章推荐
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
AngularJS入门之动画
Jul 27 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 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
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
公务员年总结的自我评价
2013/10/25 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
六查六看剖析材料
2014/10/06 职场文书
信息合作协议书
2014/10/09 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
2015年见习期工作总结
2014/12/12 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
六一儿童节致辞
2015/07/31 职场文书