如何用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 相关文章推荐
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 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
用PHP生成自己的LOG文件
2006/10/09 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python实现KNN邻近算法
2021/01/28 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
python类的实例化问题解决
2019/08/31 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
python数据化运营的重要意义
2019/11/25 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
Java程序员面试90题
2013/10/19 面试题
简历的自荐信
2013/12/19 职场文书
幼儿园教师工作制度
2014/01/22 职场文书
运动会通讯稿200字
2014/02/16 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
节约用水广告语60条
2019/11/14 职场文书
python APScheduler执行定时任务介绍
2022/04/19 Python