js中数组map方法的使用和实现
js中数组map方法的使用和实现
MDN中定义
map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
语法
var new_array = arr.map(function callback(currentValue[, index[, selfArray]]) {
// Return element for new_array
}[, thisArg])
参数
callback
生成新数组元素的函数,使用三个参数:
(1)currentValue
callback 数组中正在遍历的当前元素。
(2)index 可选
callback 数组中正在遍历的当前元素的索引。
(3)selfArray 可选
map 方法调用的数组本身。
thisArg可选
执行 callback 函数时值被用作this。
返回值
一个由原数组每个元素执行回调函数的结果组成的新数组。(原来数组遍历时调用传入的callback函数的返回值组成的数组)
详细描述
map 方法会给原数组中的每个元素都按顺序调用一次传入的callback 函数。callback 函数每次执行后的返回值(包括 undefined和null)组合起来形成一个新数组。(注意:callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。)
callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身。
如果 thisArg 参数提供给map,则会被用作回调函数的this值。否则undefined会被用作回调函数的this值。(这里和forEach中thisArg参数的作用是一致的,用于改变传入callback函数的this指向callback为箭头函数时thisArg参数无效)
map 方法不修改调用它的原数组本身(可以在 callback 执行时改变原数组)
map 方法处理数组元素的范围是在 callback 方法第一次调用之前就已经确定了。调用map方法之后追加的数组元素不会被callback访问。如果存在的数组元素改变了,那么传给callback的值是map访问该元素时的值。
使用示例
let arr = [1,3, ,7]let newArray = arr.map((currentValue, index, selfArray) => {console.log(this)return { currentValue: currentValue * 2, index}}, {a: 9})console.log(newArray)// Window// Window// Window// [{currentValue: 2, index: 0},{currentValue: 6, index: 1}, empty, {currentValue: 14, index: 2}]
上述代码arr数组调用了map方法,传入callback回调函数(箭头函数)和thisArg参数,打印回调函数内部的this并返回一个对象,对象里面是数组循环的当前元素乘2和当前元素索引值。根据打印值可以看出回调函数的this没有改变,新数组里面的值是处理后的对象。下面我们看下无返回值和传入普通函数的使用:
let arr = [1,3, ,7]let newArray = arr.map(function(currentValue, index, selfArray) {if (currentValue < 5) {console.log(this)return { currentValue: currentValue * 2, index}}}, {a: 9})console.log(newArray)// {a: 9}// {a: 9}// [{currentValue: 2, index: 0}, {currentValue: 6, index: 1}, empty, undefined]
上述代码传入了一个普通的函数,根据打印值看出,callback函数传入普通函数的时候,会把callback函数的this指向传入的thisArg参数,并且没有手动设置返回值时会返回undefined。根据callback函数打印的次数来看传入的值为空值时callback回调函数就不会调用并且新数组也会是空值(empty),我们不光可以传入自己定义的函数也可以传入js中已有的方法如:
let arr = [1,3, ,7]let newArray = arr.map(String)console.log(newArray)// ["1", "3", empty, "7"]
上述代码传入已有的string方法将数组中元素类型转换为字符类型,还有其他许多像这样的方法可以直接使用,让我们在处理数据的时候更加方便和简洁。看完了描述和使用,让我们模拟实现自己的map方法吧
步骤思路
1、 在array原型上添加自己的map方法
2、 传入callback回调函数和thisArg参数
3、 根据调用的数组长度创建新数组newArry
4、 循环原来数组并使用hasOwnProperty方法当前元素是否为空值
5、 是的话新数组就赋值callback函数返回的值
6、 返回新数组
实现代码
Array.prototype.myMap = function(callback, thisArg) {const length = this.lengthlet newArry = new Array(length)for (let index = 0; index < length; index++) {// 利用hasOwnProperty方法检测空值// 利用call方法调用方法并改变this的指向if (this.hasOwnProperty(index)) newArry[index] = callback.call(thisArg, this[index], index, this)}return newArry}
验证测试
Array.prototype.myMap = function(callback, thisArg) {const length = this.lengthlet newArry = new Array(length)for (let index = 0; index < length; index++) {// 利用hasOwnProperty方法检测空值// 利用call方法调用方法并改变this的指向if (this.hasOwnProperty(index)) newArry[index] = callback.call(thisArg, this[index], index, this)}return newArry}let arr = [1,3, ,7]newArray = arr.myMap((currentValue, index, selfArray) => {console.log(this)return { currentValue: currentValue * 2, index}}, {a: 9})console.log(newArray)// Window// Window// Window// [{currentValue: 2, index: 0},{currentValue: 6, index: 1}, empty, {currentValue: 14, index: 2}]newArray = arr.myMap(function(currentValue, index, selfArray) {if (currentValue < 5) {console.log(this)return { currentValue: currentValue * 2, index}}}, {a: 9})console.log(newArray)// {a: 9}// {a: 9}// [{currentValue: 2, index: 0}, {currentValue: 6, index: 1}, empty, undefined]newArray = arr.myMap(String)console.log(newArray)// ["1", "3", empty, "7"]
至此我们模拟实现map方法就完成了。
js中数组map方法的使用和实现相关推荐
- 请尽可能说出js中数组的方法,最少3个,越多越好
我接下来要把数组方法全都过一遍,顺手做个整理. 至于为什么整理这个,最近总听说面试经常会问到这个问题, 面试官灵魂发问:请尽可能说出js中数组的方法,最少3个,越多越好 据可靠消息了解到,如果你回答的 ...
- js中数组indexOf方法的使用和实现
js中数组indexOf方法的使用和实现 IndexOf方法定义 indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1. IndexOf方法语法 arr.inde ...
- jquery中的map()方法与js中的map()方法
1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...
- JS中数组迭代方法(JavaScript从入门到疯癫)
数组迭代的方法包含了以下七个( map,filter,forEach,some,every, findIndex,reduce) 目录 1.map 2.filter 3.foreach 4.数组som ...
- 一分钟掌握js中的map方法
目录 map是什么 map方法的结构及入参 语法糖 map一般不改变原数组 map是什么 map是操作js数组的方法,也可以说是一个函数,作用是遍历整个数组,对里面的每个值做处理再返回一个新的值. 注 ...
- Js中数组去重的几种方法
前几天在看前端面试题的时候,其中js部分有个问题是实现数组去重的算法,一开始就想了一两种方法,后来仔细回忆了下这个题,觉得该问题实现方法确实不止局限于一两种方法 ,从不同的角度去看待该问题就会有多种实 ...
- js中数组常用的方法总结,包括ES6
原文地址:js中数组常用的方法总结,包括ES6 1.push() 后增 push()方法可以向数组后添加一个新的元素,并返回新数组的长度. 末尾添加,返回长度,改变原数组 var a = [1,2,3 ...
- JS中数组使用的方法
JS中数组使用的方法 数组的介绍 JavaScript Array(数组):属于对象的一种 在句子中的作用就是使用一个单独的变量来存储一系列的值 数组的创建方法 1.字面量方式:var arr=[] ...
- javascript学习系列(1):数组中的map方法
最好的种树是十年前,其次是现在.歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的 ...
最新文章
- 【开发环境】Mac 中安装 Python3 最新版本 ( 下载 Python 最新版本 | 安装 Python3 | 验证 Python3 )
- 005 Ceph配置文件及用户管理
- java轩辕剑天之痕游戏攻略_轩辕剑之天之痕游戏攻略大全
- VMware下安装的Mac OS X如何修改显示分辨率
- mybatis的逆向工程
- 特斯拉陶琳:全新Model 3标准续航升级版新增前排双层玻璃、电尾等功能
- FPGA工作笔记0001---FPGA简介-强大的逻辑资源和恐怖的IO并行处理能力
- 8个数据清洗Python代码,复制可用,最长11行 | 资源
- STM32通过定时器捕获的方法驱动(HC-SR04)超声波测距模块
- WDM驱动和NT式驱动
- 免费的DDoS防火墙有哪些
- Ribbon详解与实例
- JAVA实现邮件抄送,密送,多个附件发送
- 使用R进行VENN_维恩图或韦恩图_的绘制_2020-11-08
- mac下密码加密zip,暴力破解zip,生成密钥字典
- Phoenix官方教程 (九) Channel
- win10怎么用计算机,win10专业版如何通过简单设置,让你的电脑更流畅
- fib matlab,基于MATLAB的FIB制备三维原子探针样品过程的模拟方法与流程
- 使用Amazon SNS,发邮件
- 【栈的应用】括号的分数
热门文章
- 教你用Python将照片变成卡通,太漂亮了,一定要学会!
- Pock 0.8.1 中文版 (在TouchBar中显示Dock栏图标)
- NI(美国国家仪器)二面
- oracle ora 19698,RMAN异机还原遭遇ORA-19698错误案例
- performance tunning --shared pool
- 云台和华为p30pro_三个原因告诉你 为何华为P30 Pro如此受追捧
- Linux命令-scp命令-发送文件/文件夹到其他linux主机
- java中this.getclass()_详解java中this.getClass()和super.getClass()的实例
- Day1:计算机网络概述——基本concept、网络结构:网络边缘、网络核心、接入网络;多路复用
- Java—代码块详解