ES6给我们的js提供了很多的数组的扩展方法,今天主要实现map方法
map方法的实现
首先我们看下map的语法和使用方法,借鉴MDN的哈!
// map的使用语法,回调函数可以接受三个参数,map的第二个参数指定回调函数的this
var new_array = arr.map(function callback(currentValue[, index[,array]]) {
// Return element for new_array
}[, thisArg])
var arr = [1,2,3,4];
var newArr = arr.map((item,i,arr) => item+i);
console.log(newArr); // [1,3,5,7]
实现map-版本1
// ===============亲手实现map方法,v1版本=========================
//为了做区别,我自己写的map为_map,挂载到Array的原型上
Array.prototype.map = function(cb){
// 错误处理
if(!Array.isArray(this) || typeof cb != 'function'){
throw new Error('has Error, please check!')
}
// 返回一个新的元素
var res = []
for(var i = 0; i < this.length; i++){
// 执行回调函数后将结果push进res中,this就是调用map的数组
res.push(cb(this[i],i,this))
}
//返回res
return res;
}
// 测试
var arr = [1,2,3,4]
var res = arr.map((item,index,arr)=> item+1)
console.log(res); // [2,3,4,5]
实现map-版本2,最终版
实现官方的第三个参数,为回调函数指定this,直接看代码
// ========亲手实现map方法,v2版本【标准版本】,为回调函数指定this===========
Array.prototype.map = function(cb,thisArg){
if(!Array.isArray(this) || typeof cb != 'function'){
throw new Error('has Error, please check!')
}
var res = []
for(var i = 0; i < this.length; i++){
//使用call方法来改变this指向即可
res.push(cb.call(thisArg,this[i],i,this))
}
return res;
}
// 测试
var arr = [1,2,3,4]
var obj = {name: 'jakeQuc',age:18}
var res = arr.map(function(item,index,arr) {
item+1;
//此处的this就是传进来的obj,调用多少次就打印多少次
// 如果此处使用箭头函数this指向的是window,你应该懂的哈
console.log(this)
},obj)
console.log(res); // [2,3,4,5]