昨天使用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  可选。当期元素属于的数组对象

运行结果:

我们先来屡屡思路,直接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)
})

运行结果:

  

可以看到我们的运行结果是完全一样的,到这里简单的map方法就实现了,可能有一些细节没注意到,没关系,只是给大家一个思路而已

JS模拟实现数组的map方法的更多相关文章

  1. 【前端_js】javascript中数组的map()方法

    数组的map()方法用于遍历数组,每遍历一个元素就调用回调方法一次,并将回调函数的返回结果作为新数组的元素,被遍历的数组不会被改变. 语法:let newAarray = arr.map(functi ...

  2. js中数组的map()方法

    map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值 map()方法按照原是数组顺序以此处理元素 注意:map()不会对空数组进行检测 :不会改变原始的数组 实例: var nu ...

  3. 从js的repeat方法谈js字符串与数组的扩展方法

    js将字符串重复N次的repeat方法的8个版本 /* *@desc: 将一个字符串重复自身N次 */ //版本1:利用空数组的join方法 function repeat(target, n) { ...

  4. js 模拟java 中 的map

    //js模拟map Map = { obj : {}, put : function(key , value){ this.obj[key] = value; }, get : function(ke ...

  5. JS 开发中数组常用的方法

    大家有没有想过,js数组为什么会有这么多的方法,没错,就是为了不同场景下处理数据的需要,就像设计模式一样,都是为了能更好的处理当前场景的需要. 首先怎么创建一个数组呢, // 两种方式 // 1,构造 ...

  6. javascript中数组的map方法

    map方法原型:array1.map(callbackfn[, thisArg]) 参数: array1,必选. 一个数组对象.该函数一般用于数组对象 callbackfn,必选. 最多可以接受三个参 ...

  7. 数组的map方法

    map方法 不支持IE6.7 .8 array1.map(fn) array1.map(fn[,thisArg]) 注意: fn 必须是函数,如果不是函数则会报错  TypeError: undefi ...

  8. 关于js中操作数组的一些方法

    网上找的通篇看了一遍讲的很透收藏了!  转自(https://www.cnblogs.com/blogs-8888/p/6518683.html) 1.锁定数组的长度(让数组的长度变成只读). 1 2 ...

  9. js中的数组对象排序(方法sort()详细介绍)

    定义和用法 sort() 方法用于对数组的元素进行排序. 语法    arrayObject.sort(sortby) 参数sortby:可选.规定排序顺序.必须是函数. 返回值 对数组的引用.请注意 ...

随机推荐

  1. Postgres通用翻页函数

    CREATE OR REPLACE FUNCTION fun_turnpage( PageSize INT, PageIndex INT, FldSort VARCHAR, StrCondition ...

  2. MyBatis 源码分析 - 缓存原理

    1.简介 在 Web 应用中,缓存是必不可少的组件.通常我们都会用 Redis 或 memcached 等缓存中间件,拦截大量奔向数据库的请求,减轻数据库压力.作为一个重要的组件,MyBatis 自然 ...

  3. Container Adaptors

    Notes from C++ Primer stack and queue: based on deque priority_queue:    based on vector Standard li ...

  4. 42_并发编程-JionableQueue

    一.生产者消费者模型   在线程世界里,生产者就是生产数据的线程,消费者就是消费数据的线程.在多线程开发当中,如果生产者处理速度很快,而消费者处理速度很慢,那么生产者就必须等待消费者处理完,才能继续生 ...

  5. House of Spirit学习调试验证与实践

    作家:Bug制造机 原文来自:House of Spirit学习调试验证与实践 House of Spirit和其他的堆的利用手段有所不同.它是将存在的指针改写指向我们伪造的块(这个块可以位于堆.栈. ...

  6. Spring,为内部方法新起一个事务,此处应有坑。

    事务的作用,使我们操作能够连贯起来.而spring则是提供了一个更简单的方法,只要使用 @Transactional 一个注解,就可以保证操作的连贯性了. 普通用法,稍后再说,这里要说的是: 在最外面 ...

  7. LeetCode手记-Add Binary

    问题描述 问题分析 分析题意,此题实际是求解两个二进制数的和,但是有两点要注意: 1.字符串的长度不限,所以相应十进制数值很可能会超过int的上限. 2.二进制的加法规则是自右向左进位,需要注意,以题 ...

  8. Android invalidate()方法 requestLayout()方法分析

    强调一点的就是,在onMeasure(),onLayout(),onDraw()这三个流程中,Google已经帮我们把draw()过程框架已经写好了,自定义的ViewGroup只需要实现 measur ...

  9. Android的Touch事件分发机制简单探析

    前言 Android中关于触摸事件的分发传递是一个很值得研究的东西.曾不见你引入了一个ListView的滑动功能,ListView就不听你手指的指唤来滚动了:也不知道为啥Button设置了onClic ...

  10. SaltStack数据系统-Pillar详解

    1:存储位置 存储在master端,存放需要提供给minion的信息 每个minion只能访问master分配给自己的(应用场景) 2:在centos7 salt 2015.5.10 (Lithium ...