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实现unicode和字符的互相转换
Jul 18 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
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
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
JavaScript延迟加载
2021/03/09 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
JS中数组重排序方法
2016/11/11 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
python获取糗百图片代码实例
2013/12/18 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
python使用opencv进行人脸识别
2017/04/07 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
Python import与from import使用及区别介绍
2018/09/06 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
keras 读取多标签图像数据方式
2020/06/12 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
《陶罐和铁罐》教学反思
2014/02/19 职场文书
个人四风对照检查材料
2014/09/26 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
聘任书格式及范文
2015/09/21 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
MySQL 字符集 character
2022/05/04 MySQL