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与ExtJS之选择实例分析
Aug 19 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
jquery遍历json对象集合详解
May 18 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
说说Vuex的getters属性的具体用法
Apr 15 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时间戳与日期的转换
2013/06/06 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
jQuery select控制插件
2009/08/17 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
python使用psutil模块获取系统状态
2016/08/27 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
有机童装:Toby Tiger
2018/05/23 全球购物
通信专业个人自我鉴定
2013/10/21 职场文书
社区助残日活动总结
2014/08/29 职场文书
运动与健康自我评价
2015/03/09 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
学习经验交流会策划书
2015/11/02 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS