如何用JS模拟实现数组的map方法


Posted in Javascript onJuly 30, 2020

昨天使用map方法的时候,突然感觉一直在直接用,也没有试试是怎么实现的,本来想直接搜一篇文章盘一下子,结果没搜到合适的,好吧,那就自己来写一下子吧

今天就来实现一个简单的map方法

首先我们来看一下map方法的使用以及具体的参数

var arr = ["a","b","c","d","e"];
    arr.map(function(currentValue,index,arr){
      console.log("当前元素"+currentValue)

 console.log("当前索引"+index)
      console.log("数组对象"+arr)
    })

map的参数:

            currentValue  必须。当前元素的值

            index  可选。当期元素的索引值

            arr  可选。当期元素属于的数组对象

运行结果:

如何用JS模拟实现数组的map方法

我们先来屡屡思路,直接Array.map()就可以调用到map方法,那他应该是在原型链上的,然后接收一个匿名函数做参数,通过循环调用传入的匿名函数

下面我们来写一下试试

Array.prototype.newMap = function(fn) {


var newArr = [];



for(var i = 0; i<this.length; i++){




newArr.push(fn(this[i],i,this))




}



return newArr;



}

来,调用一下试一下子

arr.newMap((currentValue,index,arr)=>{
      console.log("newMap当前元素"+currentValue)


 console.log("newMap当前索引"+index)
      console.log("newMap数组对象"+arr)
    })

运行结果:

如何用JS模拟实现数组的map方法

可以看到我们的运行结果是完全一样的,到这里简单的map方法就实现了,可能有一些细节没注意到,没关系,只是给大家一个思路而已

以上就是如何用JS模拟实现数组的map方法的详细内容,更多关于JS模拟实现数组的map方法的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
原生javascript实现分页效果
Apr 21 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 Javascript
Vue性能优化的方法
Jul 30 #Javascript
vue props default Array或是Object的正确写法说明
Jul 30 #Javascript
Vue props中Object和Array设置默认值操作
Jul 30 #Javascript
vue prop传值类型检验方式
Jul 30 #Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 #Javascript
vue setInterval 定时器失效的解决方式
Jul 30 #Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 #Javascript
You might like
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
js正则相关知识点专题
2018/05/10 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
python多进程实现进程间通信实例
2017/11/24 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
电子商务个人自荐信
2013/12/12 职场文书
办公室文书岗位职责
2013/12/16 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
保护环境建议书100字
2014/05/13 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python