如何用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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
document.open() 与 document.write()的区别
Aug 13 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
prototype.js常用函数详解
Jun 18 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
js实现滑动进度条效果
Aug 21 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
python中列表和元组的区别
2017/12/18 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
python中bytes和str类型的区别
2019/10/21 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Django 实现图片上传和下载功能
2020/12/31 Python
安全生产责任书
2014/03/12 职场文书
手机银行营销方案
2014/03/14 职场文书
春风行动实施方案
2014/03/28 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
后备干部推荐材料
2014/12/24 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
初三毕业感言
2015/07/31 职场文书
Python编程源码报错解决方法总结经验分享
2021/10/05 Python