如何用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 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
Node.js API详解之 zlib模块用法分析
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
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
php广告加载类用法实例
2014/09/23 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
一个javascript参数的小问题
2008/03/02 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
详解K-means算法在Python中的实现
2017/12/05 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
解析Python3中的Import
2019/10/13 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
回门宴答谢词
2014/01/13 职场文书
新年晚会主持词
2014/03/24 职场文书
长城导游词300字
2015/01/30 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
关于vue-router-link选择样式设置
2022/04/30 Vue.js