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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
jquery异步请求实例代码
Jun 21 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
儿童学习python的一些小技巧
2018/05/27 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
电气自动化自荐信
2013/10/10 职场文书
中国好声音华少广告词
2014/03/17 职场文书
2014年教师节活动总结
2014/08/29 职场文书
《西门豹》教学反思
2016/02/23 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
Elasticsearch 配置详解
2022/04/19 Java/Android
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS