小撸 array map 源码

822 阅读2分钟
官方的方法有时候用着确实挺好用的,那仔细想想是怎样实现的呢?自己是否可以搞一个,那就从最简单的开始吧 Array.prototype.map 

要撸一个array map方法的源码,首先需要看下他的具体的定义和使用,先搞明白他的功能呀【貌似是废话哈】


官方定义

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array }[, 
thisArg]);

其实就是,只有第一个参数是必须的,其他的都是可选的,也就是函数内部处理了
var new_array = arr.map(function callback(currentValue,index,array) {
 // Return element for new_array },thisArg);

参数

callback
生成新数组元素的函数,使用三个参数:
currentValue
callback 数组中正在处理的当前元素。
index可选
callback 数组中正在处理的当前元素的索引。
array可选
callback map 方法被调用的数组。
thisArg可选

执行 callback 函数时使用的this 值。


返回值

一个新数组,每个元素都是回调函数的结果。

描述

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。


举个例子 - 最简单的栗子

咱们主要是为了演示下函数功能,举个比较简单的说明下就可以

let arr=['a','b','c'];
let newArr=arr.map(function(item,index){
    console.log(index);
    return item+'A';
});

输出结果
arr 不变 
---------------
0
1
2
nweArr : ['aA','bA','cA']



怎样自己来实现和map一样的功能呢?


直接贴代码

Array.prototype.cusomerMap=function(cb,context){

    let newArr=[];
    for(var i=0;i<this.length;i++){
        if(cb && typeof cb==='function'){
           let val = cb.call(context,this[i],i,this);
            newArr.push(val);
        }
    }

    return newArr;
}

现在想想代码好少啊,但是功能确实好用。

感觉官方的这些方法没事的时候就应该想想他们怎么写出来的,关键是这帮人怎么想的。


本文比较简单,只是为了说明现成的东西固然好用,但是要明白实现的机制!

欢迎纠错