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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
Vue解析带html标签的字符串为dom的实例
Nov 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
PHPUnit安装及使用示例
2014/10/29 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
JS实现多功能计算器
2020/10/28 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
Python中元组,列表,字典的区别
2017/05/21 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
python入门教程之基本算术运算符
2020/11/13 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
新闻记者个人求职的自我评价
2013/11/28 职场文书
超市5.1促销活动
2014/01/15 职场文书
四风存在的原因分析
2014/02/11 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
观后感格式
2015/06/19 职场文书
公司开业主持词
2015/07/02 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL