如何用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框架的AJAX实例代码
Nov 03 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP实现懒加载的方法
2015/03/07 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
jquery对元素拖动排序示例
2014/01/16 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
python实现自动解数独小程序
2019/01/21 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
临床专业自荐信
2014/06/22 职场文书
会计学毕业生求职信
2014/06/25 职场文书
购房个人委托书范本
2014/10/11 职场文书
2014年班组长工作总结
2014/11/20 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python