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 相关文章推荐
jquery ajax abort()的使用方法
Oct 28 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
简单了解JavaScript sort方法
Nov 25 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
PHP中MD5函数使用实例代码
2008/06/07 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
python fabric实现远程操作和部署示例
2014/03/25 Python
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Python中bisect的用法及示例详解
2020/07/20 Python
Python类的继承super相关原理解析
2020/10/22 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
中式餐厅创业计划书范文
2014/01/23 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
2015年护士节活动总结
2015/02/10 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
mysql多表查询-笔记七
2021/04/05 MySQL
详解MySQL 联合查询优化机制
2021/05/10 MySQL