如何用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 相关文章推荐
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
JS二维数组的定义说明
Mar 03 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
javascript简易画板开发
Apr 12 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
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
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
javascript 常用代码技巧大收集
2009/02/25 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
Node.js学习入门
2017/01/03 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python脚本获取操作系统版本信息
2016/12/17 Python
python实现人脸识别代码
2017/11/08 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
升职感谢信
2015/01/22 职场文书
三八节活动主持词
2015/07/04 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书