如何用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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
JavaScript日历实现代码
Sep 12 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
javascript实现获取中文汉字拼音首字母
May 19 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
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
php框架知识点的整理和补充
2021/03/01 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
js实现圆盘记速表
2015/08/03 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
python+opencv实现车道线检测
2021/02/19 Python
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
给同学的道歉信
2014/01/16 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
建筑工程催款函
2015/06/24 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android