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 相关文章推荐
JavaScript 事件查询综合
Jul 13 Javascript
javascript EXCEL 操作类代码
Jul 30 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
php实现URL加密解密的方法
2016/11/17 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
python简单猜数游戏实例
2015/07/09 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
Python类如何定义私有变量
2020/02/03 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
Django如何重置migration的几种情景
2021/02/24 Python
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
幼儿园教师演讲稿
2014/05/06 职场文书
局火灾防控工作方案
2014/05/25 职场文书
孩子教育的心得体会
2014/09/01 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
小学总务工作总结
2015/08/13 职场文书