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 23 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
JS运算符简单用法示例
Jan 19 Javascript
angular组件间通讯的实现方法示例
May 07 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
如何开发一个虚拟域名系统
2006/10/09 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
python调用百度语音识别api
2018/08/30 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
python实现微信防撤回神器
2019/04/29 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
python nmap实现端口扫描器教程
2020/05/28 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
幼儿园美术教学反思
2014/01/31 职场文书
项目经理聘任书
2014/03/29 职场文书
大学生社团活动总结
2014/04/26 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
爱护公物演讲稿
2014/09/09 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
python实现Thrift服务端的方法
2021/04/20 Python