如何用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 相关文章推荐
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 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与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
windows环境下tensorflow安装过程详解
2018/03/30 Python
python基础 range的用法解析
2019/08/23 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
Python实现直播推流效果
2019/11/26 Python
简单介绍django提供的加密算法
2019/12/18 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
美术毕业生求职信
2014/02/25 职场文书
儿童生日会策划方案
2014/05/15 职场文书
节约用电标语
2014/06/17 职场文书
海洋天堂观后感
2015/06/05 职场文书
如何在Python项目中引入日志
2021/05/31 Python