JavaScript-map手写原理

86 阅读 0 评论 57 点赞

我是靠谱客的博主微笑发带，最近开发中收集的这篇文章主要介绍JavaScript-map手写原理，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

大家好，哈哈哈哈call，apply，bind的原理终于结束了，今天给大家带来一点简单的实现原理，那就是map，map要实现起来相比较于以前的还是比较简单，容易理解的，下面我们就开始讲解这个map方法，要实现map前，我们应该知道map的回调函数里面有几个参数，大家一般就知道map里有两个参数分别为item（循环的每一项），index（下标），其实还有一个那就是array（整个数组），下面既然知道了使用方法，下面大家先准备好参数，使用一下map看一下执行效果：

let arr=[1,3,4,5,6,7,8,9];
let result=arr.map((item,index,array)=>{
console.log(item,index,array)
输出：
1 0 [
1, 3, 4,
5,
7, 8, 9, 10
]
3 1 [
1, 3, 4,
5,
7, 8, 9, 10
]
4 2 [
1, 3, 4,
5,
7, 8, 9, 10
]
5 3 [
1, 3, 4,
5,
7, 8, 9, 10
]
7 4 [
1, 3, 4,
5,
7, 8, 9, 10
]
8 5 [
1, 3, 4,
5,
7, 8, 9, 10
]
9 6 [
1, 3, 4,
5,
7, 8, 9, 10
]
10 7 [
1, 3, 4,
5,
7, 8, 9, 10
]
return item*item
})
console.log(result)
[
1,
9, 16,
25,
49, 64, 81, 100
]

大家看到map会输出改变之后的数组，既然我们看到了map原生的方法的效果下面让我们来模拟一下map在：

;(function(){
Array.prototype.myMap=function myMap(){
}
}())

我们先上面定义好一个自调函数然后里面在数组的原型链里面绑定一个我们自定义的函数，这样就完成了可以使用.myMap效果的调用，下面我们，说一下在函数内部的this指向谁呢？没错此时this指向的是arr数组，所以我们现在得到了arr数组，还需要得到map内个回调函数，我们可以直接在myApp参数里面得到，下面我们来写一下代码：

;(function(){
Array.prototype.myMap=function myMap(fn){
let newArray=[];
for(let i=0;i<this.length;i++){
let f=fn(this[i],i,this)
newArray.push(f)
}
return newArray;
}
}())

我们来讲解一下上面的代码在5行的this[i]的意思呢就是因为当前this指向的是arr数组所以我们循环this[i]得到的就是数组的每一项，这样我们就满足了第一个参数item的标准，第二个参数呢是下标我们传过去i不就是下标码，第三个参数就是arr数组本身，正好this指向的就是数组本身，所以第三个参数就是this。这样我们就实现了map函数，我们下面来试一下效果：

1 0 [
1, 3, 4,
5,
7, 8, 9, 10
]
3 1 [
1, 3, 4,
5,
7, 8, 9, 10
]
4 2 [
1, 3, 4,
5,
7, 8, 9, 10
]
5 3 [
1, 3, 4,
5,
7, 8, 9, 10
]
7 4 [
1, 3, 4,
5,
7, 8, 9, 10
]
8 5 [
1, 3, 4,
5,
7, 8, 9, 10
]
9 6 [
1, 3, 4,
5,
7, 8, 9, 10
]
10 7 [
1, 3, 4,
5,
7, 8, 9, 10
]
[
1,
9, 16,
25,
49, 64, 81, 100
]

我们发现结果一样，哈哈哈哈我们就实现map方法，今天的内容很简单，大家多跟着写两遍代码争取背过，俗话说好记性不如烂笔头嘛。好啦，今天的内容就到这里啦，谢谢大家，喜欢的小伙伴点个赞哦！！！