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技巧来提高你的代码
Jan 08 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
图文讲解vue的v-if使用方法
Feb 11 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
农民和部队如何穿矿
2020/03/04 星际争霸
php使用MySQL保存session会话的方法
2015/06/26 PHP
session 加入redis的实现代码
2016/07/15 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
零基础php编程好学吗
2019/10/11 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python对列表中的各项进行关联详解
2017/08/15 Python
Python while循环使用else语句代码实例
2020/02/07 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
端午节粽子促销活动方案
2014/02/02 职场文书
个人廉洁自律总结
2015/03/06 职场文书
学校党员干部承诺书
2015/05/04 职场文书
电力安全学习心得体会
2016/01/18 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
总结几个非常实用的Python库
2021/06/26 Python
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫