如何用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 相关文章推荐
jquery 应用代码 方便的排序功能
Feb 06 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
js实现简单的打印表格
Jan 15 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
提问的智慧
2006/10/09 PHP
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
python快速排序代码实例
2013/11/21 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python用for循环实现九九乘法表
2018/05/31 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
详解python破解zip文件密码的方法
2020/01/13 Python
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
冰淇淋店创业计划书范文
2013/12/27 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
北体毕业生求职信
2014/02/28 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
小学班主任寄语大全
2014/04/04 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
先进工作者事迹材料
2014/12/23 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
甲午大海战观后感
2015/06/02 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
Hive常用日期格式转换语法
2022/06/25 数据库
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技