js原生map实现的方法总结


Posted in Javascript onJanuary 19, 2020

js原生方法map实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="author" content="杨欣">
  <title>map</title>
</head>

<body>

  <script>
    Array.prototype.my_map = function (callback) {
      if (!Array.isArray(this) || !this.length || typeof callback !== 'function') {
        return []
      } else {
        let result = [];
        for (let index = 0; index < this.length; index++) {
          const element = this[index];
          result.push(callback(element, index, this))
        }
        return result
      }
    }

    let arr = [1, 2, 3, 4, 5]
    let res = arr.my_map((ele, i) => {
      return ele + 10
    })
    console.log(res)
  </script>
</body>

</html>

补充知识点

我们平时用的是已经封装好的map方法,如果让我们自己封装一个map,应该如何实现。

万变不离其宗,其实遍历数组的核心还是for循环。因此下面封装一个map方法。

思路:

1.在原型上添加一个方法
2.传一个函数和this
3.call 方法传的参数和封装好的map方法的参数是一样的。

Array.prototype.fakeMap = function(fn,context) {
	let arr = this;
	let temp = [];
	for(let i=0;i<arr.length;i++){
		let result = fn.call(context,arr[i],i,arr);
		temp.push(result);
	}
	return temp;
}

以上就是本次介绍的全部相关知识点,如果大家有任何补充可以联系三水点靠木的小编。

Javascript 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
Javascript 面向对象 继承
May 13 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 #Javascript
JS运算符简单用法示例
Jan 19 #Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 #Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 #Javascript
js实现图片上传到服务器和回显
Jan 19 #Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 #Javascript
ES6 Object.assign()的用法及其使用
Jan 18 #Javascript
You might like
PHP常用的小程序代码段
2015/11/14 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
JS input 数字验证代码
2009/07/30 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
JS实现轮播图效果
2020/01/11 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
Python中的super用法详解
2015/05/28 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python中pika模块问题的深入探究
2018/10/13 Python
在Python中定义一个常量的方法
2018/11/10 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
重构Python代码的六个实例
2020/11/25 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
甲午大海战观后感
2015/06/02 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
Javascript 解构赋值详情
2021/11/17 Javascript
nginx配置限速限流基于内置模块
2022/05/02 Servers