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 相关文章推荐
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
isset和empty的区别
2007/01/15 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
python 安装移动复制第三方库操作
2020/07/13 Python
python 获取字典键值对的实现
2020/11/12 Python
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
业务助理岗位职责
2013/11/18 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
广告业务员岗位职责
2015/02/13 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
python中tkinter复选框使用操作
2021/11/11 Python
python接口测试返回数据为字典取值方式
2022/02/12 Python
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js