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 相关文章推荐
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
python实现超市扫码仪计费
2018/05/30 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
python3排序的实例方法
2020/10/20 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
Python的collections模块真的很好用
2021/03/01 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
本溪关门山导游词
2015/02/09 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python
一文解答什么是MySQL的回表
2022/08/05 MySQL