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 相关文章推荐
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
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/13 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
php表单处理操作
2017/11/16 PHP
PHP CURL使用详解
2019/03/21 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
jQuery 使用个人心得
2009/02/26 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
python Zmail模块简介与使用示例
2020/12/19 Python
C#的几个面试问题
2016/05/22 面试题
理工大学毕业生自荐信范文
2014/02/22 职场文书
网站客服岗位职责
2014/04/05 职场文书
药剂专业自荐书
2014/06/20 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
Python实现简单得递归下降Parser
2022/05/02 Python
win7配置本地ftp服务器的图文教程
2022/08/05 Servers