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中的eval()函数使用介绍
Dec 31 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 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 常用类整理
2009/12/23 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
python optparse模块使用实例
2015/04/09 Python
python 换位密码算法的实例详解
2017/07/19 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
Python 加密与解密小结
2018/12/06 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
Python3常用内置方法代码实例
2019/11/18 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Python阶乘求和的代码详解
2020/02/14 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
商场营业员岗位职责
2015/04/14 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python