重写数组扩展方法-filter

81 阅读1分钟

数组中的扩展方法filter经常被使用,所以此次我重写了数组中的filter方法并深刻了解了一下filter数组扩展方法的设计方法以及理念

全部代码

Array.prototype.myFilter=function (cb){
   const _arg=this
   const _len=this.length
   const _arg2=arguments[1] || window
   const tar=[]

   for(let i=0;i<_len;i++){
      const _item=deepClone(_arg[i])
      if(cb.apply(_arg2,[_item,i,_arg])){
         tar.push(_item)
      }

   }
   return tar
}

重写filter时,将重写的myFilter绑定在Array的prototype上,调用时即可用array.prototype.myfilter调用即可。

首先我们要明白filter的使用以及原理,这样的话才便于我们重写,filter扩展方法接收两个参数,第一个参数为callback函数,第二个参数为object对象,callback函数可以接受三个参数,分别为item、index、array,object对象参数可以改变callback函数中的this指向,使callback函数中的this指向object对象

开始重写! 我们需要一些变量去维护this指针以及数组的长度,也要用变量去收集第二个参数(当第二个参数未传参时,默认为window 具体讲解请看JavaScript中的this到底是什么

   const _arg=this
   const _len=this.length
   const _arg2=arguments[1] || window

注意!!!filter扩展方法返回的是一个新的数组,所以我们需要深拷贝,手写深拷贝

所以我们需要用变量维护一个新的数组

    const tar=[]

最后,我们只需要将原数组中的每一个元素利用for循环依次遍历即可,遍历的时候,首先要将原数组元素深拷贝,然后通过apply方法调用,符合callback函数条件的元素push到tar数组中,最后return出tar数组即可。