JS模拟实现数组的map方法

时间:2022-10-18 23:19:19

昨天使用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方法的更多相关文章

  1. 【前端&lowbar;js】javascript中数组的map&lpar;&rpar;方法

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

  2. js中数组的map&lpar;&rpar;方法

    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中的数组对象排序&lpar;方法sort&lpar;&rpar;详细介绍&rpar;

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

随机推荐

  1. &lbrack;Fraud&rsqb; China UnionPay defrauded in Macau money laundering scandal

    Source: http://www.wantchinatimes.com/news-subclass-cnt.aspx?id=20140510000005&cid=1103 China Un ...

  2. 关于网上常见的几种MD5加密的区别

    (1) using System.Security.Cryptography; byte[] result = Encoding.Default.GetBytes(yps); //tbPass为输入密 ...

  3. network config

    ifcfg-ens32 --static TYPE=Ethernet BOOTPROTO=static DEFROUTE=yes IPV4_FAILURE_FATAL=no IPV6INIT=yes ...

  4. Entity Framework 5&period;0基础系列

    1.Entity Framework简介 http://www.cnblogs.com/aehyok/p/3315991.html 2.Entity Framework DBFirst尝试http:/ ...

  5. Android ActionBar详解&lpar;二&rpar;:ActionBar实现Tabs标签以及下拉导航

    一.添加标签 Tabs   在ActionBar中实现标签页可以实现android.app.ActionBar.TabListener ,重写onTabSelected.onTabUnselected ...

  6. Python基础:数据类型-列表与元组(6)

    Python中数据结构主要有序列.集合和字典. 1. 通用序列操作 Python内置了多种序列,其中最常用的两种:列表和元组.另一种重要的序列是字符串. 列表和元组的主要不同在于:列表是可以修改的,而 ...

  7. Hadoop 管理工具HUE配置-初始配置

    1 界面换成中文 默认是英文的,可以修改为中文 1.修改配置文件settings.pynano hue/desktop/core/src/desktop/settings.py LANGUAGE_CO ...

  8. java mongodb的MongoOptions生产级配置

    autoConnectRetry仅仅意味着驱动程序会自动尝试重新连接到意外断开连接后在服务器(一个或多个).在生产环境中,您通常需要将此设置为true. connectionsPerHost是物理连接 ...

  9. jquery选择器和属性

    jQuery的选择器 <html lang="en"> <head> <meta charset="UTF-8"> < ...

  10. 第四章 代词(Les pronoms )

    ★人称代词 .主语人称代词 第一人称和第二人称属纯人称代词,只能代人不能代物;第三人称可代人,亦可代物.如: La Terre est ronde. Elle tourne autour du Sol ...