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操纵Cookie实现购物车程序
Feb 15 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
用js实现放大镜效果
Oct 28 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 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
一个odbc连mssql分页的类
2006/10/09 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
javascript的this关键字详解
2019/05/20 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
python matplotlib坐标轴设置的方法
2017/12/05 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
numpy 声明空数组详解
2019/12/05 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
第28个世界无烟日活动总结
2015/02/10 职场文书
工作调动申请报告
2015/05/18 职场文书
呐喊读书笔记
2015/06/30 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android