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 相关文章推荐
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
微信小程序基础教程之worker线程的使用方法
Jul 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生成随机数或者字符串的代码
2008/09/05 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
linux下php上传文件注意事项
2016/06/11 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
Python实现购物车购物小程序
2018/04/18 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
python滑块验证码的破解实现
2019/11/10 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
2014年元旦促销活动方案
2014/02/22 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
医药营销个人求职信
2014/04/12 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
作风建设演讲稿
2014/05/23 职场文书
实训报告范文大全
2014/11/04 职场文书
文艺演出主持词
2015/07/01 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python