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 进度条效果实现代码整理
May 21 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
vue中如何使用ztree
Feb 06 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 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
php中的登陆login
2007/01/18 PHP
php 生成WML页面方法详解
2009/08/09 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
PHP的PDO连接讲解
2019/01/24 PHP
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
安全生产投入制度
2014/01/29 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
篮球比赛策划方案
2014/06/05 职场文书
高三英语复习计划
2015/01/19 职场文书
党员个人承诺书
2015/04/27 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS